一、transition过渡

transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画。

transition: all 1s ease-out 0s;

transition-property	规定应用过渡的CSS属性的名称
transition-duration	定义过渡效果花费的时间，默认0
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"
transition-delay	规定过渡效果何时开始，默认0

1. 可过渡样式

不是所有的CSS样式值都可以过渡，只有具有中间值的属性才具备过渡效果 ,具体如下

颜色:  color background-color border-color outline-color
位置:  backround-position left right top bottom
长度: 
       max-height min-height max-width min-width height width
       border-width margin padding outline-width outline-offset
       font-size line-height text-indent vertical-align  
       border-spacing letter-spacing word-spacing
数字:  opacity visibility z-index font-weight zoom
组合:  text-shadow transform box-shadow clip
其他:  gradient

2. 速度曲线

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

3. 触发方式

一般地，过渡transition的触发有三种方式，分别是伪类触发、媒体查询触发和javascript触发。其中常用伪类触发包括:hover、:focus、:active等

hover ： 鼠标悬停触发
active ： 用户单击元素并按住鼠标时触发
focus ： 获得焦点时触发
@media触发 ： 符合媒体查询条件时触发

二、animation动画属性

动画是使元素从一种样式逐渐变化为另一种样式的效果，使用时先用@keyframes创建动画，再把它绑定到一个选择器中。

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

1. @keyframes创建动画

用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%的效果

0% 是动画的开始，100% 是动画的完成。

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

2. 引用动画

animation: name 1s ease-in 1s infinite alternate;

animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数，infinite播放无限次
animation-direction	规定是否应该轮流反向播放动画

3. 速度曲线

linear	动画从头到尾的速度是相同的
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
step-start	在变化过程中，都是以下一帧的显示效果来填充间隔动画
step-end	在变化过程中，都是以上一帧的显示效果来填充间隔动画
steps()	    可以传入两个参数，第一个是一个大于0的整数，他是将间隔动画等分成指定数目的小间隔动画，然后根据第二个参数来决定显示效果。第二个参数设置后其实和step-start，step-end同义，在分成的小间隔动画中判断显示效果

4. 反向播放

animation-direction
normal	默认值。动画按正常播放
reverse	动画反向播放
alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放
alternate-reverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放
initial	设置该属性为它的默认值
inherit	从父元素继承该属性