css动画效果

一、transition (过渡)

1、transition 属性是一个简写属性，可用于设置四个过渡属性

    transition: property（属性名） duration（过渡时间）	liming-function（运行方式） delay（动画延迟）
  
    例：根据描述写出样式：过渡动画，让宽度发生变化，持续时间四秒钟，匀速运动，没有延迟
          transition:width	4s	linear	0s;

2、transition-property （属性名）⼀个或多 个，⽤逗号隔开

      支持的过渡效果的 CSS 属性的名称（height、width、opacity、visibility、color等）(默认值为all)
     
      例： transition-property：opacity, height; //设置透明度和高度属性

3、transition-duration （过渡时间）一个或多 个，⽤逗号隔开 （必填，不填没效果）

      完成过渡效果需要时间(默认值为0s)
     
      例： transition-duration：3s, 5s; // 过渡持续时间 对应设置的属性个数，一个则重复

4、transition-timing-function （运行方式）渐变函数值

       1）ease                渐快，匀速，减慢cubic-bezier(0.25,0.1,0.25,1)
	   2）ease-in             渐快，匀速cubic-bezier(0.42,0,1,1)
	   3）ease-out            匀速，减慢cubic-bezier(0,0,0.58,1)
	   4）ease-in-out        和ease类似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)
	   5）linear             全程匀速cubic-bezier(0,0,1,1)
	   
      例：transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

5、transition-delay （动画延迟）指定何时将开始切换效果

       1）ease                渐快，匀速，减慢cubic-bezier(0.25,0.1,0.25,1)
	   2）ease-in             渐快，匀速cubic-bezier(0.42,0,1,1)
	   3）ease-out            匀速，减慢cubic-bezier(0,0,0.58,1)
	   4） ease-in-out        和ease类似，但比ease的加速度大（幅度大）cubic-bezier(0.42,0,0.58,1)
	   5） linear             全程匀速cubic-bezier(0,0,1,1)
	   
      例：transition-delay: 2s; // 等待2秒前切换效果开始

二、transform （转变）动画

transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作.一般是配合transition的属性一起使用

1）旋转(rotate)：主要分为2D旋转和3D旋转。rotate(angle)，2D 旋转，参数为角度，如45deg；rotate(x,y,z,angle)，3D旋转，围绕原地到(x,y,z)的直线进行3D旋转rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)；rotateZ(angle)；

2）缩放(scale)：一般用于元素的大小收缩设定。主要类型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z为收缩比例。

3）倾斜(skew)：主要用于对元素的样式倾斜。skew(x-angle, y-angle)，沿着x和y轴的2D倾斜转换；skewX(angle)，沿着x轴的2D倾斜转换；skew(angle)，沿着y轴的2D倾斜转换。

4）移动(translate)：主要用于将元素移动。translate(x, y)，定义向x和y轴移动的像素点；translate(x, y, z)，定义像x、y、z轴移动的像素点；translateX(x)；translateY(y)；translateZ(z)

三、animation自定义动画

1、定义动画

1）定义单个动画
  @keyframes 动画名称{
	from{初始状态属性}
	to{结束状态属性}
  }
  
2）定义多个动画
 @keyframes 动画名称{
   0%{初始状态属性}
   50%{中间还可以再添加关键帧}
   100%{结束状态属性}
  }

2、使用动画

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

1. 简写

 /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
 animation: name duration timing-function delay iteration-count direction fill-mode

2. 动画名称 animation-name （定义的动画名称）

animation-name 属性指定应用的一系列动画，每个名称代表一个由 @keyframes 定义的动画序列。

3. animation-duration （持续时间）

 animation-duration 属性指定一个动画周期的时长。

4. animation-timing-function（运动曲线） 可能值为一或多个

5. animation-delay（何时开始）

6. animation-iteration-count （播放次数）

   例： animation-iteration-count:infinite; //无限循环
       animation-iteration-count:1; //播放1次
   

7. animation-duration（是否反方向）

   例：animation-duration：normal；//默认属性，从开始到结束
        animation-duration：alternate；// 交替反向运行，从开始到结束，然后结束到开始
       animation-duration：reverse；// 反向运行动画，每周期结束动画由尾到头运行
       animation-duration：alternate-reverse；//反向交替， 反向开始交替
   

8. animation-fill-mode（起始与结束状态）

   设置 CSS 动画在执行之前和之后如何将样式应用于其目标。
        
   例：animation-fill-mode：none；// 默认属性，当动画未执行时，动画将不会将任何样式应用于目标，而是已经赋予给该元素的 CSS 规则来显示该元素。
       animation-fill-mode：forwards；// 目标将保留由执行期间遇到的最后一个关键帧计算值
      animation-fill-mode：backwards；// 动画将在应用于目标时立即应用第一个关键帧中定义的值
      animation-fill-mode：both；//动画将遵循forwards和backwards的规则，从而在两个方向上扩展动画属性。
   

9. animation-play-state（运行或者暂停）

   定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。
        
   例：animation-play-state：running；// 运行
       animation-play-state：paused；// 暂停