注：使用关键帧与原文有较大变化，动画属性，如timing、delay、playstate、animation-count、iterationcount、direction、fillmode和will-改变等创造动画魔法作为设计师和开发者，除了精简的用户界面和更好的页面加载速度之外，我们发现通过在界面中添加动画效果，可以提高用户与网站的交互率，这可以更好的吸引用户使用我们的产品。与原来基于JavaScript操作Dom来实现动画相比，现在的CSS3具有更好的兼容性。所以本文介绍一些CSS动画的基础知识。关键帧我们可以通过逐渐改变对象的运动状态，将动画应用于页面上的任何对象。但是，使用关键帧功能，我们可以控制动画对象每个阶段的状态。@keyframespulse{0%{变换：scale3d(1,1,1);}50%{变换：scale3d(1.1,1.1,1.1);}100%{变换：scale3d(1,1,1);}}让我们试着思考下面的例子：动画名称（Animationname）：pulse3步数：0%（状态时间）、50%（x时间）、100%（结束时间）CSS值：scale3d(x,y,z)当在(@keyframes)中定义了动画之后，我们可以控制以下事情：动画的持续时间延迟动画开始的时间动画的重复率动画的方向下面是一个实现示例：按钮{动画持续时间：1秒；动画名称：脉冲；在上面的示例中，我们向Button添加了一个动画脉冲，并定义了1秒的持续时间。如果我们调整这个duration属性的值，我们可以看到这个Button会有一个很好的效果。如图：Demo地址：http://codepen.io/phyesix/pen/EZebOJ1。动画时序（AnimationTiming）动画时间函数用于确定我们希望动画在运动周期中执行加速和减速效果的时间。所以，为了达到这个效果，我们需要定义动画移动的速度。下面是我们常用的动画时间属性的一些选项，比如：initial,inherit,ease,ease-in,ease-out,andlinear等。参考：https://i.stack.imgur.com/动画时间函数:left(ease)和right(linear)以上选项是一种非常直接的动画调整方式。但是，通过自定义贝塞尔曲线的值，可以满足您特定的动画时间要求。关于如何使用贝塞尔曲线，我们可以查看Mozilla的开发者网站2.动画延迟（AnimationDelay）动画延迟通常在我们需要延迟动画的时候使用。即当一个动画被触发时，会延迟1S后执行。例如：我们在“SendFeedBack”按钮上添加了延迟处理：动画延迟：左（1秒），右（2秒）3.动画播放状态（AnimationPlayState）动画播放状态常用于控制是否播放动画需要暂停或继续。Running（运行）：动画继续Paused（暂停）：动画停止Demo地址：http://codepen.io/phyesix/pen/apaYXr4。动画的循环次数循环次数是指动画在单位时间内重复执行的次数。Infinite（无限）：无限循环指定值（x）：重复动画x次Inheritance（继承）：从父Demo地址继承循环次数：http://codepen.io/phyesix/pen/EZeELr5。动画方向（AnimationDirection）动画方向用于指定动画对象的移动方向。比如从size0%到100%，或者从100%到%0，或者从0%到100%size，然后从100%反转到0%。Sequential（Normal）：指的是动画从0%到100%的执行顺序。Returnfrom100%to0%reverse-alternate(Alternate-reverse)：动画从100%反转到0%，然后从0%正序前进到100%。演示地址：http://codepen.io/phyesix/pen/apaYXr6。动画填充模式（AnimationFillMode）我们需要知道，当动画执行结束时，动画执行过程中添加到对象元素上的样式并不是永久的。此样式仅在动画期间应用，然后删除。关于动画应用的模式，我们可以使用如下属性值来表示：Backward：当动画在0%时，样式会应用到元素上Forward：当动画在100%时，样式会被应用到元素上Both：该样式将在动画的开始和结束时应用初始值（Initial）：将该属性设置为默认值演示地址：http://codepen.io/phyesix/pen/PWgqLj7。Will-Change非常感谢Will-Change功能。通过Will-Change属性，我们可以在动画执行之前，提前通知浏览器我们要执行动画的对象元素。这允许我们一次为一个元素的多个属性设置动画。这减少了大多数动画执行期间潜在的性能影响。button{will-change:transform,opacity;在下面的代码中，我声明所有元素的所有属性都将被动画化，甚至是非动画区域。*,*::before,*::after{will-change:all}显然，上述用法会造成一些不必要的系统资源占用和性能损失。所以，我们应该尽可能在需要的元素上使用CSS动画。更多关于Will-Change的特性，请查看：https://dev.opera.com/articles/css-will-change-property/4个超级属性在关键帧中，我们几乎可以使用任何CSS属性。在当今的大多数浏览器中，您可以安全地使用位置、比例、旋转、不透明度和其他属性值。而这4个属性可以给动画效果带来更高效更好的表现。引用:https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/结语以上列举的是CSS动画的一些基本属性，一旦你了解了这些基础知识，就会更方便开始动画创作。对于您可能感兴趣的许多CSS动画应用程序和示例资源，请查看Codepen的CSS动画单元。翻译地址：http://imziv.com/blog/article...
