Bert Bos & Eva Kasal | CSS3 in Style
CSS3 animations defines a property to animate elements (such as div, h1 and span) without JavaScript or Flash.
@-moz-keyframes example { This is the animation code from { -moz-transform: scale(1.0); } to { -moz-transform: scale(2.0); } } div { This is the element we apply the animation to -moz-animation-name:example; -moz-animation-duration:1s; -moz-animation-timing-function:ease; /* ease by default */ -moz-animation-delay:1s; /* 0 by default */ -moz-animation-iteration-count:1; /* 1 by default */ -moz-animation-direction:alternate; /* normal by default */ }
Internet Explorer and Opera do not yet support the @keyframes
rule or the animation property.
April 2012: experimental implementations (prefixes), the syntax is exactly the same for each browser, with only a prefix change required
span:nth-child(1){ animation-name: cloud1; animation-timing-function: ease-in-out; animation-duration: 10s; animation-iteration-count: infinite; } @keyframes cloud1 { from { left: 10px;} 50% { left: 90px;} to { left: 10px;} }
from demo 1
@-moz-keyframes ball { 0% { -moz-transform: translateY(-300px) scaleY(1.2); } 33% { -moz-transform: translateY(0px) scaleY(1.2); } 35% { -moz-transform: translateY(10px) scaleY(0.8); } 66% { -moz-transform: translateY(-100px) scaleY(1.2); } 100% { -moz-transform: translateY(0px); } }
from demo 2
@-moz-keyframes ball { 0% { -moz-transform: translateY(-300px) scaleY(1.2); } 35% { -moz-transform: translateY(-300px) scaleY(1.2); } /* Same position as 0% */ 65% { -moz-transform: translateY(0px) scaleY(1.2); } /* Starts moving after 35% to this position */ 67% { -moz-transform: translateY(10px) scaleY(0.8); } 85% { -moz-transform: translateY(-100px) scaleY(1.2); } 100% { -moz-transform: translateY(0px); } }
from demo 3
@-moz-keyframes ball { 0% { -moz-transform: translateY(-300px); } 35% { -moz-transform: translateY(-300px); -moz-animation-timing-function: ease-in; } 65% { -moz-transform: translateY(0px); -moz-animation-timing-function: ease-out; } 85% { -moz-transform: translateY(-100px); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: translateY(0px); } }
from demo 4
<div class="ball-arc"> <div class="ball"></div> </div> .ball-arc { -webkit-animation: ball-x 2.5s cubic-bezier(0, 0, 0.35, 1); } /* cubic-bezier here is to adjust the animation-timing speed. This example makes the ball take longer to slow down. */ @-webkit-keyframes ball-x { 0% { -webkit-transform: translateX(-275px); } 100% { -webkit-transform: translateX(0px); } }
from demo 5
.running .spin {-webkit-animation: spin 2.5s; -moz-animation: spin 2.5s;} .running .wobble {-webkit-animation: wobble 2s; -moz-animation: wobble 2s;} @-moz-keyframes wobble { 0%, 24%, 54%, 74%, 86%, 96%, 100% { -moz-transform: scaleX(1.0); } 25%, 55%, 75% { -moz-transform: scaleX(1.3) scaleY(0.8) translateY(10px); } /* Points hitting floor */ 30%, 60%, 80% { -moz-transform: scaleX(0.8) scaleY(1.2); } /* Wobble inwards */ 75%, 87% {-moz-transform: scaleX(1.2);} 97% {-moz-transform: scaleX(1.1);} } @-moz-keyframes spin { 0% { -moz-transform: rotate(-180deg); } 100% { -moz-transform: rotate(360deg); } }
Source: smashing magazine
#demo { -webkit-transform-style: preserve-3d; -webkit-animation-name: rotate; -webkit-animation-duration: 30s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-play-state: paused} #demo:target { -webkit-animation-play-state: running }
Pausing the animation is different from stopping it