Bringing Your Website to Life with Transitions and Animations - CSS3 Foundations - page 234

Prefixed browser support: Firefox 5+, Chrome 3+, Opera 12+, Safari 4+
animation-timing-function does exactly the same as the transition-timing-function property.
It describes how the intermediate values used during a transition are calculated. Because animations can repeat mul-
tiple times, the animation-timing-function describes these intermediate values over each cycle of an anim-
ation.
1. In .showcase li:first-child , add the following declaration:
-webkit-animation-timing-function: ease-in-out;
2. Save styles.css.
For the full list of timing functions you can use, see the transition-timing-function property description
earlier in this chapter.
animation-delay
Initial value: 0s | Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 5+, Chrome 3+, Opera 12+, Safari 4+
Just like transitions, animations can also be given a delay, which works in the exact same way.
1. In .showcase li:first-child , add the following declaration:
-webkit-animation-delay: 5s;
2. Save styles.css.
Now, when the page is first loaded, the first product image doesn't start fading out until after a five-second delay.
As with transition-delay , you can also specify a negative delay that causes an animation to wait for x number
of seconds and then start x number of seconds into that animation.
animation-iteration-count
Initial value: 1 | Inherited: No | Applies to: all elements | CSS3
Unprefixed browser support: IE 10+, Firefox 16+, Opera 12.5+
Prefixed browser support: Firefox 5+, Chrome 3+, Opera 12+, Safari 4+
animation-iteration-count determines how many times an animation should occur. You can give it a num-
ber or the keyword infinite to make an animation cycle with no end. By default, animation-iteration-
count is 1 .
1. In .showcase li:first-child , add the following declaration:
-webkit-animation-iteration-count: infinite;
2. Save styles.css.