前言在《CSS魔法堂：Transition就这么好玩》中，我们了解到对于简单的补间动画，我们可以通过transition来实现。那么多简单的动画适合用transition来实现呢？答案是——我们只需要定义动画开始帧和结束帧的状态动画。一旦关键帧数大于2，就必须转向CSSAnimation。本文是这段时间的学习记录，欢迎拍砖。简单粗暴介绍CSS动画规则和属性定义关键帧动画语法：@keyframes{[{/*CSSProperties*/}]*}示例：@keyframesrotate{from{transform:旋转（0度）；}到{变换：旋转（360deg）；}}注意事项：1.的命名约定//命名需要遵循以下规则constrIsInvalid=/^--|^[0-9]+-|^(?:unset|initial|inherit|none)$/,rIsValid=/^[0-9a-z-_\\]+$/iffunctionisValidAnimationName(animationName:string):boolean{return!rIsInvalid.test(animationName)&&rIsValid(animationName)}2.为0-100%，from，相当于0%，to，相当于100%。3.重复@keyframesCSS规则不支持层叠样式，所以当有多个关键帧同名时，只有最后出现的才有效。/*无效*/@keyframesrotate{from{transform:rotate(0deg);}到{变换：旋转（360deg）；}}/*effective*/@keyframesrotate{from{transform:rotate(90deg);}到{变换：旋转（-360deg）；}}4.重复怎么办同@keyframesCSS规则，标准规定相同的关键帧不产生级联，只有最后一次出现的才被认为是有效的。但实际上FireFox14+和Chrome都将关键帧设计成可堆叠的。@keyframesrotate{from{transform:rotate(0deg);}来自{背景：红色；}/*上面两个时间偏移其实等价于*from{transform:rotate(0deg);背景：红色；}*/到{变换：旋转（360deg）；背景：黄色；}}5.!important导致属性失败。一般情况下，使用!important会给CSS属性最高的权重，但是会导致@keyframes下的CSS属性失效。@keyframesrotate{from{transform:rotate(90deg);背景：红色！重要；/*背景属性无效*/}to{transform:rotate(-360deg);}}6.至少必须提供两个键Frames/*不根据缓动函数进行动画处理，而是移过动画持续时间的最后一刻*/@keyframesmove-left{to{left:100px;}}使用动画{animation:;}例子：.box.rotate{animation:rotate10sinfinitealternate;}子属性引入，指定@keyframes定义的补间动画名称.，动画时长，默认0s。单位是s和ms。，动画播放延时，默认0s。单位是s和ms。，动画重复次数，默认为1，infinite表示无限循环。动画播放总时长为*。，可选值为normal|反转|备用|alternate-reverse，表示动画播放顺序为fromtoto，fromtotofrom，fromtoto，fromtotofrom，fromtotofromThenfromtoto。注意：设置alternate|alternate-reverse时，animation-iteration-count必须大于1才能看到效果，可选值为none|forwards|backwards|both，用于设置结束前后的动画是否对元素应用0%和100%的样式。表示无应用程序、100%样式应用程序、延迟播放期间0%样式应用程序，以及分别为0%和100%样式。注意：默认情况下（none），动画结束后会恢复动画前的样式；向后设置时，值大于0才能看到效果。，可选值running|暂停，获取和设置播放状态。注意：通过这个属性，我们只能实现暂停和继续播放的效果，不能实现重放，更不能实现播放。用于设置缓动函数的类型，取值为ease|ease-in|缓出|缓入缓出|线性|一步开始|步骤结束|步骤（<整数>，<标志>）|帧（<整数>）|立方贝塞尔曲线（<数字>，<数字>，<数字>，<数字>）。其中，ease|的效果缓入|缓出|缓入缓出|线性|cubic-bezier(,,,)是连续梯度，step-start|步骤结束|步骤（<整数>，<标志>）|frames()是一种变异效果。让我们更深入地研究后者。Easingfunction-step疑惑题目step-start其实等价于steps(10,start)，step-end等价于steps(10)，所以我们只需要了解steps(,)就可以了./*通过设置一个动画周期（）的平均刷新帧数，实现突变动画效果。具体应用包括：游戏精灵行走、打字效果等。*-两个关键帧之间的刷新次数*-方向，可选值为end|开始。*end为默认值，表示动画一结束动画效果就结束；*start表示动画开始后立即执行第一个关键帧的效果。*/steps(,)盗用张旭鑫的解释：start：表示直接开始。即时间刚刚开始，距离段已经执行完毕。所以动画执行的5个切分点是下面5个，忽略起点，因为时间直接从头到第二个点：end：表示突然停止。即时间一到，当前的距离位移就会停止。所以动画执行的5个切分点是以下5个，结束点忽略，因为没有结束点要执行的时间：另外，通过设置为forwards，那么当设置为结束时，它也会显示（保持）动画最后一个关键帧的样式。Eventconsttarget=document.getElementById("target")target.addEventListener("animationstart",e=>{//动画开始时触发})target.addEventListener("animationiteration",e=>{//每次重复动画中触发//当为1时，不触发})target.addEventListener("animationend",e=>{//动画结束时触发})尝试实现replayeffect到目前为止我们可以通过@keyframes来定义和应用CSSAnimation，但是我们能否获得对动画效果的更多控制呢？如开始、暂停、恢复、重放。通过我们可以轻松实现开始、暂停和恢复效果，但是重播就没那么容易了。functionpause(target:HTMLElement):boolean{constisRunning=target.style.animationPlayState=="running"if(isRunning){target.style.animationPlayState="paused"}returnisRunning}functionplay(target:HTMLElement):布尔值{constisStop=target.style.animationPlayState=="paused"if(isStop){target.style.animationPlayState="running"}returnisStop}functionreplay(target:HTMLElement,animationClassName:string):void{//先移动移除动画效果target.classList.remove(animationName)//requestAnimationFrame的回调函数会在下次界面渲染之前执行requestAnimationFrame(_=>{//这个时候动画的影响还在，等一下对于重新启用之前要渲染的界面只有动画效果可以重播比特拉nsition和比JavaScript更简单的API还允许我们使用GPU来加速它^_^尊重原创，转载请注明出处：https://www.cnblogs.com/fsjoh...^_^胖约翰指的是https://developer。mozilla.org...https://designmodo.com/steps-...http://lea.verou.me/2011/09/p...http://jsfiddle.net/simurai/C...https://www.zhangxinxu.com/wo...
