Drawing & Animation using

CSS and SVGs

Adding Animations

1. CSS change over time with transition

#element {
    transition: fill .4s ease;
    fill: green;
 }
 #element:hover {
    fill: blue;
 }

http://bit.ly/itp-circle

2. Keyframes

@keyframes floating-circle {
  0%   {transform: translateX(0)}
  25%  {transform: translateX(-25px)}
  75%  {transform: translateX(25px)}
  100% {transform: translateX(0)}
}

#circle1 {
  animation: floating-circle 5s linear infinite;
}

http://bit.ly/itp-circle

3. Inline Animations

<animateTransform
   attributeName="transform"
   type="scale"
   from="1"
   to="3"
   dur="2s"
   repeatCount="indefinite" />

http://bit.ly/itp-triangles