### css动画 —— transition 1. transition-property：需要过渡的 css 属性，如 width 2. transition-duration：过渡的时长，如 1s 3. transition-timing-function：指定一个函数，该函数反应了属性值的变化快慢（速度）。可以是缓动函数的名称，也可以是 css3 中的贝塞尔曲线函数 4. transition-delay：延迟开始过渡的时间，如 0.5s ``` div { background: #fff; color: #000; transition: all 1s linear 0.5s; } div:hover { background: #000; color: #fff; } ``` ***** ***** ### css动画 —— animation 1. animation-delay：动画开始时的延迟时间。默认 0s，无延时 2. animation-direction：动画是否反向播放。默认 normal，表示动画结束之后，回到起点状态 3. animation-duration：动画时长。默认 0s，无动画 4. animation-iteration-count：动画重复次数。默认 1，只执行一次动画 5. animation-name：动画名称，该名称为动画关键帧的名称。默认 none 6. animation-play-state：动画状态，即是处于播放还是暂停状态。默认 running，为播放状态 7. animation-timing-function：动画速度。默认 ease 8. animation-fill-mode：指定在动画执行之前和之后如何给动画的目标应用样式。 ``` @keyframes move { from { width: 100px; } to { width: 200px; } } /* 或 */ @keyframes move { 0% { width: 100px; } 100% { width: 200px; } } //动画使用 div:hover { animation: 1s 1s rainbow linear 3 forwards normal; animation-play-state: paused | running; } //属性详情 div:hover { · animation-name: rainbow; animation-duration: 1s; animation-timing-function: linear; animation-delay: 1s; animation-fill-mode:forwards; animation-direction: normal; animation-iteration-count: 3; //画保持突然终止时的状态 animation-play-state: paused | running; } ```