深入理解CSS动画animation

01-animation也是一个复合属性,包括animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-play-state、animation-fill-mode共8个子属性

 1 div{
 2      300px;
 3     height: 100px;
 4     background-color: pink;
 5     animation-name: test;
 6     animation-duration: 3s;
 7     animation-timing-function: ease;
 8     animation-delay: 0s;
 9     animation-iteration-count: infinite;
10     animation-direction: normal;
11     animation-play-state: running;
12     animation-fill-mode: none;
13 }
14 /* 关于keyframes关键帧的内容稍后介绍     */
15 @keyframes test{
16     0%{background-color: lightblue;}
17     30%{background-color: lightgreen;}
18     60%{background-color: lightgray;}
19     100%{background-color: black;}
20 }

02-

原文地址:https://www.cnblogs.com/showlgfcode/p/13597301.html