css3过渡与动画

过渡 当触发的时候会有过渡的效果
1.transition-property:none|all|某一个属性值
2.transition-duration：多少秒 也就是说过渡效果执行多长时间 默认的是0s
3.transition-timing-function:ease|linear|ease-out|ease-in|ease-in-out|贝塞尔曲线的参数值cubic-bezier(number，number，number，number)|steps（走几步，start|end）
ease：两头慢，中间快
Linear：匀速
Ease-in：开始慢
Ease-out：结束慢
Ease-in-out：开始结束慢
Ease和ease-in-out的区别就是ease-in-out的幅度更大一点
4.transition-delay:延迟多少秒; 默认的是0s
5.transition合写
例如：transition:left 2s ease 1s

动画 不用触发自己执行，而且可以做多贞的动画
1.animation-name：none|自己命名
2.animation-duration：动画多长时间
3.animation-timing-function 运动轨迹和过渡的参数是一模一样的，同上
4.animation-iteration-count：infinite|动画执行的次数 默认是1次
5.animation-direction：normal|reverse|alternate|alternate-reverse 方向
alternate往返
alternate-reverse相反的往返
6.animation-play-state：running|paused 让动画暂停或者是继续播放
7.animation-delay延迟
8.animation-fill-mode：none|backwards|forwards|both
动画在开始的时候是否要保持第一针的设置，动画在结束的时候是否保持结束时的状态
None：不做设置
Backwards动画开始在第一贞的状态
forwards结束的时候保持动画最后那贞的状态
Both开始的时候保持第一贞的状态，结束的时候保持结束时候的状态
9.合写 animation
animation：abc 2s ease 0s 1 normal none running
1 播放次数
Normal 方向 direction
None fill-mode
Running 播放状态

动画贞两种书写方式
@-webkit-keyframes abc{
0%{left:0;top:0;}
50%{left:250px;top:100px;}
100%{left:500px;top:0;}
}
@-webkit-keyframes abcd{
0%{color:#fff;}
100%{color:#000;}
}
@-webkit-keyframes abcde {
from{
opacity: 0;
}
to{
opacity: 1;
}
}