深入理解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 width: 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-