In CSS animations, the animation-timing-function property controls how quickly an animated element changes over the duration of the animation.

If the animation is a car moving from point A to point B in a given time (your animation-duration), the animation-timing-function says how the car accelerates and decelerates over the course of the drive.

There are a number of predefined keywords available for popular options. For example, the default value is ease, which starts slow, speeds up in the middle, and then slows down again in the end.

Other options include ease-out, which is quick in the beginning then slows down, ease-in, which is slow in the beginning, then speeds up at the end, or linear, which applies a constant animation speed throughout.

 

练习题目：

For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out.

Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds.

 

练习代码：

 1 <style>
 2 
 3   .balls {
 4     border-radius: 50%;
 5     background: linear-gradient(
 6       35deg,
 7       #ccffff,
 8       #ffcccc
 9     );
10     position: fixed;
11     width: 50px;
12     height: 50px;
13     margin-top: 50px;
14     animation-name: bounce;
15     animation-duration: 2s;
16     animation-iteration-count: infinite;
17   }
18   #ball1 {
19     left:27%;
20     animation-timing-function: linear;
21   }
22   #ball2 {
23     left:56%;
24     animation-timing-function: ease-out;
25   }
26 
27   @keyframes bounce {
28     0% {
29       top: 0px;
30     }
31     100% {
32       top: 249px;
33     }
34   }
35 
36 </style>
37 
38 <div class="balls" id="ball1"></div>
39 <div class="balls" id="ball2"></div>

 

效果如下：

注意，因为循环时间相同，所以2个小球不同速率，但同一时间结束