CSS3动画基础与CSS3过渡基础

动画属性:animation

animation 与 transition的区别

相同点：都是随着时间改变元素的属性值。
不同点：

1. transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；（初始效果——最终的效果之间的变化；）
2. animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值，（初始效果———动画帧———动画帧————最终的效果）

animation 复合式写法:

过度时间和延迟时间顺序不能互换，前面是过度时间，后面的是延迟时间。

animation 属性值

1. animation-name (必要的)检索或设置对象所应用的动画名称
   必须与规则@keyframes配合使用 （定义关键帧）：
   @keyframes mymove{} animation-name:mymove;
   语法一：

@keyframes mymove{
				  from{初始状态属性}
			   	  to{结束状态属性}
  				 }

语法二： 0%  =   from    ;      100%   =     to
@keyframes mymove{
				0%{初始状态属性}
				100%{结束状态属性}
	 		} 

2. animation-duration (必要的)
   检索或设置对象动画的持续时间 （s,ms）
   说明：animation-duration:3s; 动画完成使用的时间为3s

3. animation-delay
   检索或设置对象动画延迟的时间（s,ms）
   说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)

4. animation-timing-function检索或设置对象动画的过渡类型
   属性值：
   linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
   ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0) 默认值；
   ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
   ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
   ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
   step-start:马上跳到动画每一结束桢的状态 (实现逐帧动画效果)

5. animation-iteration-count
   检索或设置对象动画的循环次数
   属性值：
   animation-iteration-count: infinite | number;
   infinite：无限循环
   number: 循环的次数 2 3

6. animation-direction 检索或设置对象动画在循环中是否反向运动
   属性值：
   normal：正常方向 0% —— 100%
   reverse：反方向运行 100% —— 0%
   alternate：动画先正常运行再反方向运行，并持续交替运行 0% —— 100% —— 0%；
   alternate-reverse：动画先反运行再正方向运行，并持续交替运行
   100% —— 0% —— 100%

7. animation-fill-mode 说明：规定动画播放之前或之后，其动画效果是否可见。
   none (默认值) : 在运动结束之后回到初始位置，在延迟的情况下，让0%在延迟后生效
   backwards : 在延迟的情况下，让0%在延迟前生效
   forwards : 在运动结束的之后，停到结束位置 （重点记忆）
   both : backwards和forwards同时生效

8. animation-play-state
   检索或设置对象动画的状态
   属性值：
   animation-play-state:running | paused;
   running:运动 (默认值)
   paused: 暂停
   注：通过鼠标某些事件时添加的；animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行

过渡属性:transition

过渡属性:transition（css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标划过、单击、获得焦点或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值 过渡属性需要触发事件，如：hover（鼠标划过事件））

1. transition-property：检索或设置对象中的参与过渡的属性说明：
   属性值可以单独设置否个属性，也可以设置多个属性 width，height； 还可以设置为all（默认值）代表所有属性
2. transition-duration：检索或设置对象过渡的持续时间
   说明：设置过度时间（s, ms） 1s = 1000ms
3. ransition-delay：检索或设置对象延迟过渡的时间
   说明：设置延迟过度时间（s, ms） 属性值为正值的时候是延迟执行过渡效果，为负值的时候是提前只想过渡效果；
4. transition-timing-function：检索或设置对象中过渡的动画类型说明：
   linear 匀速
   ease（默认值） 逐渐慢下来
   ease-in 加速
   ease-out 减速
   ease-in-out 先加速后减速

贝塞尔曲线网址：http://cubic-bezier.com/

复合式写法：

transition:all 2s 1s linear ;
transition: 2s linear 1s all ;
说明：当使用复合式写法的时候，过度时间和延迟时间的顺序是不能换的，第一个值代表过度时间，第二个值代表延迟时间；
注：哪个元素发生变形，就把过渡属性添加给谁； 建议写给元素初始的效果里；

2D属性： transform

transform翻译成汉语具有"变换"或者"改变"的意思。通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果最能体现transform 属性强大实力的是实现元素的3D变换效果。

1. 2D位移 translate()
   说明：translate(tx) 当参数设置一个值的时候，代表水平方向的位移；
   translate(tx，ty) 第一个值代表水平方向的距离，第二个值 垂直方向的距离；
   translate(tx，ty, tz) 第一个值代表水平方向的距离，第二个值 垂直方向的距离.第三个值 沿Z轴移动（3D）
   translateX(tx) 指定方向设置位移 沿X轴移动
   translateY(ty) 指定方向设置位移 沿Y轴移动
   translateZ(tz) 指定方向设置位移 沿Z轴移动 ( 3D)
   当属性值为正值时 代表的是向右或者向下移动，当为负值的时候 代表 向左或向上移动
   说明：属性值可以用px 也可以用%（百分比大小的参照物是元素的宽高）
   说明：translate（）位移的效果和定位里的relative的效果是类似的，都是在当前位置进行位移的，对其元素的布局是没有影响的，原来的位置的保留的。

2. 2D缩放scale()
   说明： 属性值代表的是倍数，是不用加单位； 0——1 之间是 缩小的效果， 大于1的时候都是放大效果；
   默认值 是 1；
   scale( 值1 ) 代表水平和垂直都放大或者缩小
   scale( 值1，值2 ) 值1： 水平方向的缩放大小 值2 ：垂直方向
   属性值可以设置为负值，但是很少用；
   scaleX（值） 水平方向的缩放比例
   scaleY（值） 垂直方向的缩放比例
   scaleZ（值） Z轴方向的缩放比例 （3D）

3. 2D旋转让rotate()
   说明: 属性值的单位是度（deg）
   rotate() 沿着中心点旋转； 只能放一个属性值 ，正值：顺时针旋转； 负值： 逆时针旋转；
   rotateX() 沿X轴旋转
   rotateY() 沿Y轴旋转
   rotateZ() 沿Z轴旋转 （3D）

4. 2D倾斜 skew()
   说明：属性值的单位是度（deg） ；属性值为正值：向左 或向上倾斜 负值：向右或向下倾斜
   skew( 值1 ) 一个值的时候 代表 沿X轴倾斜
   skew( 值1，值2) 值1： 沿X轴的倾斜 值2 ：沿Y轴的倾斜
   skewX（） 沿X轴的倾斜
   skewY（） 沿Y轴的倾斜
   说明：元素通过 transform进行变形时，都是对其他元素的布局不产生影响的。不脱离文档流。
   变形时元素默认情况下都是沿着元素的中心点去变形的
   当使用复合式写法的时候，他们顺讯不同，会导致结果不一样，他们执行的顺讯是从后向前解析的。
   transform: translate(100px) rotate(60deg);

5. 原点设置属性：transform-origin
   定义：transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
   说明：transform-origin：值1 值2 ； 值1： 水平 值2： 垂直px % left top right bottom ;

6. backface-visibility ：隐藏被旋转的 div 元素的背面
   backface-visibility:visible;可见 （默认值）
   backface-visibility:hidden;不可见
   backface-visibility 的bug : 如果元素翻转后结束后显示在上一层，给他加一个背景色就可以解决了。