<circle id="circle1" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
#element {
transition: fill .4s ease;
fill: green;
}
#element:hover {
fill: blue;
}
http://bit.ly/itp-circle
@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
<animateTransform
attributeName="transform"
type="scale"
from="1"
to="3"
dur="2s"
repeatCount="indefinite" />
http://bit.ly/itp-triangles