-webkit-animation: Still a composite attribute, -webkit-animation:name duration timing-function delay iteration_count direction; includes the following properties (1) -webkit-animation-name The use of this property must be used in conjunction with @-webkit-keyframes eg: @-webkit-keyframes fontchange{ 0%{font-size:10px;} 30%{font-size:15px;} 100%{font-siez:12px;} } percent means the percentage of duration, if not set duration, it is the Infinity div{-webkit-animation-name:fontchange;} (2)-webkit-animation-duration Indicates the duration of the animation (3)-webkit-animation-timing-function represents the time curve used by the animation "Syntax":-webkit-animation-timing-function:ease | Linear | ease-in | Ease-out | ease-in-out (4)-webkit-animation-delay Indicates the delay before starting the animation syntax-webkit-animation-delay:delay_time ; (5)-webkit-animation-iteration-count means the animation repeats several times syntax-webkit-animation-iteration-count:times_ number; (6)-webkit-animation-direction Indicates the direction of the animation syntax-webkit-animation-direction:normal (default) | Alternate normal Direction always forward alternate when the number of repetitions is even when the direction is forward, the odd direction opposite "additional" other attributes related to animation (1)-webkit-animation-fill-mode:none (default) | Backwards | Forwards | Both set the behavior before and after the animation starts (test knot fruit is not very clear) (2)-webkit-animation-play-state:running (default) | Paused Set the animation's run status comprehensive case: @-webkit-keyframes Fontbulger {0% {font-size:10px;} 30% {font-size:15px;} 100% {font-size:12px;}} #box {-webkit-animation-name: fontbulger;-webkit-animation-duration:1s;- Webkit-animation-iteration-count:3;-webkit-animation-direction:alternate;-webkit-animation-timing-function: Ease-out;-webkit-animation-fill-mode:both;-webkit-animation-delay:2s;} <div id= "box" > Text Changes </div>
Css3--webkit-animation Animation
