-WebKit-animation [css3]

-WebKit-Animation: name, duration, timing-function, delay, iteration_count, Direction

(1)-the use of the WebKit-animation-name attribute must be combined with @-WebKit-keyframes.

Eg: @-WebKit-keyframes fontchange {

0% {font-size: 10px ;}

30% {font-size: 15px ;}

100% {font-siez: 12px ;}

}

The percentage indicates the duration percentage. If duration is not set, the value is infinite.

(2)-WebKit-animation-duration indicates the animation duration.

(3)-WebKit-animation-timing-function indicates the time curve used by the animation.

[Syntax]:-WebKit-animation-timing-function: Functions | linear | memory-In | memory-Out | memory-in-out

(4)-WebKit-animation-delay indicates the latency before the animation starts.

[Syntax]-WebKit-animation-delay: delay_time;

(5)-WebKit-animation-iteration-count indicates that the animation must be repeated several times.

[Syntax]-WebKit-animation-iteration-count: times_number;

(6)-WebKit-animation-direction indicates the animation direction

[Syntax]-WebKit-animation-direction: normal (default) | Alternate

Always forward in normal direction

Alternate goes forward when the number of repetitions is an even number, and the direction is opposite when the odd number is an odd number.

[Also] other attributes related to animation

(1)-WebKit-animation-fill-mode: none (default) | backwards | forwards | both sets the action before and after the animation starts (test ends)

Results are not clear)

(2)-WebKit-animation-play-state: running (default) | paused sets the animation running 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: 1 s;

-WebKit-animation-iteration-count: 3;

-WebKit-animation-direction: Alternate;

-WebKit-animation-timing-function: timed-out;

-WebKit-animation-fill-mode: both;

-WebKit-animation-delay: 2 S;

}

<Div ID box text change </box text change <