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; } }