css3入门(8)过渡，动画

过渡

过渡的基本使用

transition过渡

• 过渡可以为一个元素在不同样式之间变化自动添加“补间动画”
• 从ie10开始兼容
• 动画更细腻，内存开销小

四个要素

• transitions：width 1s linear 0s；
  一般添加在需要被过渡的地方，一般是需要被伪类的那个盒子
• width 要过渡的属性
• ls动画的总时长
• linear变化速度的曲线
• 0s延迟时间

参与过渡的属性

• 所有数值类的属性,例如：width，height，left，top，border-radius
• 背景颜色和文字颜色
• 所有的变形

all

• 所有的属性都参与过渡

过渡的四个小属性

小属性层叠大属性的作用

过渡的缓动效果

横轴表示时间，纵轴表示变化

• ease 两头慢，中间快
• ease-in 一开始慢越来越快
• ease-out 一开始慢，越来越快
• ease-in-out 两头慢，中间快

贝塞尔曲线

• 网站 https://cubic-bezier.com/
  可以生成贝塞尔曲线，可以自定义动画缓动参数

动画

动画的定义和调用

动画的定义

• 可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

动画的调用

• 定义完之后就可以使用animation属性调用动画
  调用也是加在原来的盒子中的，并不是动画上
  

执行次数

• 动画可以有第五个参数，代表执行的次数
• 3就表示3次
• infinite 永远执行
• alternate 所有的偶数次数自动逆向执行
• forwards 动画停止在最后执行的状态

多帧动画

在时间进行到20%会进行变色