css笔记 - animation学习笔记(二)-白红宇

css笔记 - animation学习笔记(二)

阅读量：6478 次

发布时间：2019-06-23

本文共 1908 字，大约阅读时间需要 6 分钟。

animation动画

@keyframes规则 - 创建动画

from - to 等价于 0% - 100%

但是优先使用0% - 100%，因为浏览器兼容性还好点

animation 动画绑定

将keyframes动画规则绑定到选择器。

必须设定动画的名称和时长。

所有动画属性

animation-name

keyframes动画的名称

属性	含义	备注
动画名称	就是keyframes规定的动画名称	不设置动画不成功
none	设置后无动画效果	如果真的没有动画就不需要设置，但是这个功能的特殊用途用于覆盖级联的动画。

animation-duration

规定动画完成一个周期所花费的秒(.2s)、毫秒(200ms)

animation-timing-function

速度曲线(三次贝塞尔曲线)

属性	含义	备注
linear	匀速运动
ease	慢 - 快 - 慢
ease-in	慢 - 快
ease-out	快 - 慢
ease-in-out	慢 - ~ - 慢
cubic-bezier	自定义	上边这几个属性，都会在关键帧之间插入补间动画。使得动画效果连贯。
steps()函数	逐帧动画	适用于关键帧的跳跃

针对上边五个三次贝塞尔，其对比效果看下边w3c的效果一目了然

        注释：Internet Explorer 9 以及更早的版本不支持 animation-timing-function 属性。
  
    
     linear
    
  
    
     ease
    
  
    
     ease-in
    
  
    
     ease-out
    
  
    
     ease-in-out

特殊的 steps()函数

参数 | 含义 | 备注

---- | ---- | ----

正整数 | 指定时间函数中的间隔数量 | 必须是正整数

start/end | 设置最后一步的状态 | start为结束时的状态（第一帧是第一步动画结束），end为开始时的状态(第一帧是第一步动画开始)

定义steps的keyframes规则中，所有关键帧必须写出来，

比如我下边这个demo中

@keyframes bgChange {      0% {        background-position-x: 0px;      }      20% {        background-position-x: -90px;      }      40% {        background-position-x: -181px;      }      60% {        background-position-x: -271px;      }      80% {        background-position-x: -359px;      }      100% {        background-position-x: -449px;      }    }

如果只改成from{} to{}两帧，动画跑不起来。同样的0% - 100% 也不可以。

animation-delay 延迟动画

动画延迟开始时间

animation-iteration-count: infinite；循环动画

动画播放次数

常用 infinite

animation-direction 反向动画

是否逆向播放

属性 | 含义

---- | ----

normal | 正常播放

alternate | 反向

alter： vt. 改变，更改

animation-play-state 暂停动画

是否运行or暂停动画

属性	含义
paused	暂停
running	跑起来，运行

巧妙的运用该属性，鼠标经过的时候设置为运行，鼠标离开即变回默认的暂停状态。

animation-fill-mode

动画时间之外的状态

属性	含义	备注
none	不改变默认行为
forwards	动画完成后，保持最后一个属性值（在最后一个关键帧中定义）	感觉就像定格最后一针的效果不变
backwards	延迟执行时间段内，动画开始前，应用开始属性值（在第一帧中定义）	同上，只不过将变化的第一帧先定格展示出来
both	向前和向后填充模式都被应用。	上边两个结合应用，开始前将第一帧先展示，结束后最后一帧定格不变。