# css动画 ## transition(过渡) > 元素从这个属性(color)的某个值(red)过渡到这个属性(color)的另外一个值(green)，这是一个状态的转变，需要一种条件来触发这种转变，比如我们平时用到的:hoever、:focus、:checked、媒体查询或者JavaScript。 > 基本语法：transition: property duration timing-function delay; 分别对应属性，持续时间，时间方程，延迟时间（多少秒后开始运行这个变化）。 例如： ~~~ <style> #box { height: 100px; width: 100px; background: green; transition: transform 1s ease-in 1s; // 一秒后用ease-in的方式对transform属性产生变化，一秒完成。 } #box:hover { transform: rotate(180deg) scale(.5, .5); } </style> ~~~ ## transform(变形) 常用参数： 1. rotate() 旋转 2. skew() 倾斜 3. scale() 按比例放大 4. translate(,) 变动，位移，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。 ## translate(移动)ranslate只是transform的一个属性值，即移动。 见上面👆 ## animation(动画) 语法：animation: name duration timing-function delay iteration-count direction play-state fill-mode; **name** 用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致 **duration** 指定元素播放动画所持续的时间 **timing-function** 规定速度效果的速度曲线，是针对每一个小动画所在时间范围的变换速率 **delay** 定义在浏览器开始执行动画之前等待的时间，值整个animation执行之前等待的时间 **iteration-count** 定义动画的播放次数，可选具体次数或者无限(infinite) **direction** 设置动画播放方向：normal(按时间轴顺序),reverse(时间轴反方向运行),alternate(轮流，即来回往复进行),alternate-reverse(动画先反运行再正方向运行，并持续交替运行) **play-state** 控制元素动画的播放状态，通过此来控制动画的暂停和继续，两个值：running(继续)，paused(暂停) **fill-mode** 控制动画结束后，元素的样式，有四个值：none(回到动画没开始时的状态)，forwards(动画结束后动画停留在结束状态)，backwords(动画回到第一帧的状态)，both(根据animation-direction轮流应用forwards和backwards规则)，注意与iteration-count不要冲突(动画执行无限次) ~~~ div:hover { animation: 1s rainbow; } @keyframes rainbow { 0% { background: #c00; } 50% { background: orange; } 100% { background: yellowgreen; } } ~~~ 通过@keyframes 定义所要使用的动画名称以及其相关效果。