本文主要介绍CSS过渡与动画的相关属性。CSStransition1.定义transition属性：可以为一个元素定义不同状态切换时的不同transition效果。是transition-property、transition-duration、transition-timing-function和transition-delay的简写属性。IE10支持，需要使用前缀-ms-。2.过渡属性说明1)transition-property：指定CSS属性的名称，transitioneffect（要过渡的CSS属性）2）transition-duration：指定过渡效果需要多少秒或多少毫秒完成3）transition-timing-function:指定转场效果的旋转速度曲线，即转场时以什么速度转场其值为：out：以slowe.ease-in-out：以slowf开始和结束。cubic-bezier(n,n,n)：在cubic-bezier函数中定义自己的值，可能的值是0到1之间的值（贝塞尔曲线调试网站：https://cubic-bezier.com）4）transition-delay：定义过渡效果何时开始，即延迟多少秒后开始动画3.语法Transition语法：transition：属性durationtiming-functiondelay；默认值为transition:all0ease0。示例：.btn{宽度：300px；高度：200px；文本对齐：居中；行高：200px；保证金：自动；背景颜色：黄绿色；transition:all.5sease0s;}.btn:hover{background-color:lightblue;border-radius:50px;}参考内容：菜鸟教程--CSS3transition属性CSS3transition-timing-function属性CSS动画1.动画定义用逗号分隔。它是动画名称、动画持续时间、动画计时函数、动画延迟、动画迭代计数、动画方向、动画填充模式和动画播放状态属性的简写属性形式。IE10支持。2.动画语法animation缩写语法：动画：名称时长计时-函数延迟迭代-计数方向。默认值为animation:none0ease01normal。3.动画属性说明1）animation-name：selector绑定的关键帧的名称2）animation-duration：动画完成所花费的时间，以秒或毫秒为单位3）animation-timing-function：速度曲线动画的次数，与transition-timing-function的值一致4)animation-delay：动画开始前的延迟5)animation-iteration-count：指定动画应该播放的次数（无限）6)animation-direction：指定是否轮流反向播放动画（normal：默认值，正常播放；reverse：动画反向播放；alternate：动画在奇数次正向播放（1,3,5...),偶数次(2,4,6...)反向播放)4.@keyframes规则的定义@keyframes规则：通过定义keyframes(或waypoints)的样式来控制CSS动画序列中的中间步骤在动画序列中。与过渡相比，这可以更好地控制动画序列中的中间步骤。帧数可以是百分比，从（相当于0%），到（相当于100%）。IE10支持。5.完整动画的用例@keyframesshow{20%{opacity:.3;}40%{border-radius:50px;}60%{背景颜色：黄色；}}/*过渡和动画可以结合使用*/@keyframesmove{0%{left:-300px;过渡：向左缓和；}50%{左：150px；过渡：左线性；}100%{左：0px；过渡：左缓出；}}.btn1{animation:show1slinear1sinfinite;}注意：在重复定义的关键帧中，如果属性不同，都会生效。如果属性相同，则以最后定义的属性为准。出现在关键帧中的!important关键字的属性将被忽略。参考内容：W3school---CSS3动画属性MDN--@keyframesCSS动画优化只允许改变transform，opacity，其他属性不改变，避免重新计算布局（reflow）applytransformtoanimationelements:translate3d(0,0,0),will-change:transform等开启硬件加速的动画元素，尽量使用固定和绝对定位的方式，避免reflow对动画元素应用更高的z-index，减少复合层数。来源：css动画与gpu推荐阅读：CSS3动画卡性能优化的完美解决方案使用CSS启用硬件加速提升网站性能（转）以上内容如有错误，希望大家指出，谢谢。
