css_动画和过渡

动画

1.动画定义

@keyframes 动画名称{
  from {}
  to{}
}

注：一般用于中间动画无变化的情况

@keyframes 动画名称{
  10% {}
  20%{}
  …
  100%{}
}

注：一般用于中间有变化效果

2 动画应用

animation-name:动画名称;

animation-duration:动画持续时间

animation-delay: 动画的延迟

animation-direction 动画运动方向

代码	含义
animation-direction:reverse;	动画反向播放
animation-direction:alternate;	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放

animation-fill-mode: 动画结束后保留哪个样式

代码	含义
animation-fill-mode:backwards;	保留第一帧的样式
animation-fill-mode:forwards;	保留最后一帧的样式

animation-iteration-count: 动画执行的次数

代码	含义
animation-iteration-count:4;	执行4次
animation-iteration-count:infinite;	无限次

animation-timing-function: 动画执行的时间曲线

代码	含义
animation-timing-function:linear;	动画从头到尾的速度是相同的。
animation-timing-function:steps();	直接跨越式运行，括号内的数字就是把运动的数值分成几部分，然后跨越运动，一般用来图片的运动

animation-play-state: 动画播放状态

速写：
animation: 4s linear 0s infinite;

第三方动画库（animate.css）
封装了css3的通用的动画样式，专业https://daneden.github.io/animate.css/

过渡 transition

transition和animation的区别

1. transition必须要触发，一般使用:hover
2. transition不需要设置关键帧
   简单的过渡效果使用transition，复杂的动画使用animation

用法

transition-property 指定过渡的属性

  可以指定一个属性    width
  可以指定多个属性   width,background
  可以指定所有属性   all

transition-duration 过渡持续的时间

  可以指定秒，以及毫秒 s /ms

transition-timing-function 过渡的时间曲线

  linear: 规定以相同速度开始至结束的过渡效果
  ease: 规定慢速开始，然后变快，然后慢速结束的过渡效果
  ease-in: 规定以慢速开始的过渡效果
  ease-out: 规定以慢速结束的过渡效果
  ease-in-out: 规定以慢速开始和结束的过渡效果

transition-delay 过渡延迟

  可以指定秒，以及毫秒 s /ms

速写
transition:property duration timing delay;

变形 transform

scale() 图片变大的倍数

skew() 角度大小+deg

rotate() 角度大小+deg

translate() 往坐标轴前进的距离+px