CSS动画效果

css2D简单动画：

添加过渡

要想实现动画效果，需要在选择器中为该元素添加过渡效果
添加过渡：transition：参数1 参数2；
参数1：规定设置过渡效果的css属性名称
参数2：规定完成过渡所需要的时间
例如：.box{transiton:all 2s;};

一个元素只有一个transform属性后面增加的transform属性会覆盖前面的属性

设置动画

transform:将元素应用2D或3D转换

• 旋转：rotate( );

  • 绕X轴旋转：rotateX( );
  • 绕Y轴旋转：rotateY( );
  • 绕Z轴旋转：rotateZ( );

  单位为deg（度）

• 位移：translate( x , y );

  • X轴方向位移：translateX( );
  • Y轴方向位移：translateY( );
  • Z轴方向位移：translateZ( );

  单位为px（像素）

• 缩放：scale( x , y )；

  • X轴缩放：scaleX( );
  • Y轴缩放：scaleY( );

  正常比例为1，大于1为放大，小于1则为缩小

• 倾斜：skew( x , y );

  • 绕X轴倾斜：skewX( );
  • 绕Y轴倾斜：skewY( );

  单位为deg（度）

• 开启景深效果： transform-style:preserve-3d;(设置给父级）

• 开启景深效果： perspective: ;(设置给父级，单位为像素）

• 指定变形中心： transform-origin:top元素顶部/center元素中心/元素底部/left元素左端/right元素右端；

C3自定义动画

C3动画即在css2D动画的基础下开启3D属性
自定义动画(也叫作关键帧动画)中，制作动画与绑定动画缺一不可

制作动画：

@keyfarmes 动画名称{
	from{ }		//相当于0%
	to{ }		//相当于100%
	}
通过@keyfarmes关键字来制作动画，其中添加各个阶段的动画效果

绑定动画：

animation复合属性，包含六项属性：

• animation-name ：动画名称 必填
• animation-duration ： 动画执行所需的时间 必填
• animation-timing-function： 动画执行的速度曲线 可选 默认值为ease先加速后减速/linear匀速/easeIn加速/easeOut减速
• animation-delay ： 动画开始之前的延迟 可选 默认值为0s(无延迟)
• animation-iteration-count ：动画执行的次数 可选 默认值1 没有单位 infinite:无限次
• animation-direction： 规定是否轮流反向播放 (播放次数至少为2时才能用) 可选 默认不反向,alternate：反向播放

div{
	animate : 动画名称 1s infinite;
	}

animation动画库

在插件中为每个class动画名绑定相对应的动画效果，可以通过绑定class名来直接使用(动画库中为每个animated元素设置了默认的动画执行时间）
使用前通过link标签引入动画库
<link rel="stylesheet" type="text/css" href="animate.min.css"/>
使用方法：<div class = " box 动画效果 animated"></div>