完整学习使用CSS动画【翻译】

注：原文有较大改动

使用keyframes, animation属性，例如timing,  delay, play state, animation-count, iteration count, direction,  fill mode以及will-change等等 创造动画魔法

做为设计者、开发人员，除去精简的用户界面，更好的页面加载速度外，咱们发现经过给界面添加动画效果，能够增长用户与网站的互动率，可以更好的吸引用户使用咱们的产品。CSS3相对于原先的基于Javascript操做Dom实现动画的方式而已，CSS现在拥有更好的兼容性。因此本文就介绍CSS动画的一些基本知识。

keyframes

经过逐渐改变对象的运动状态的方式，咱们能够将动画应用到到页面上的任何对象上。然而利用keyframes特性，咱们即可以控制动画对象每一阶段的状态。

@keyframes pulse {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50%{
    transform: scale3d(1.1, 1.1, 1.1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

咱们尝试思考如下这个例子:

1. 动画名（Animation name): pulse
2. 3个步骤：0%（state time), 50%（x time）, 100% （end time）
3. CSS值：scale3d(x, y, z)

 

 

当动画已经在(@keyframes)中定义好后，咱们能够控制如下几样东西：

• 动画的持续时间
• 延迟多久动画开始
• 动画的重复频率
• 动画的方向

如下是实现示例：

button { 
   animation-duration: 1s; 
   animation-name: pulse; 
}

在以上示例中，咱们给一个Button添加了动画pulse，定义了持续时长(duration)为1秒。 若是咱们调整了这个持续时长属性的值，则能够看到这个Button就会出现一个还不错的效果。如图：

Demo地址： http://codepen.io/phyesix/pen/EZebOJ

 

2. 动画时间（Animation Timing)

动画时间函数是用于决定咱们但愿动画在移动周期内要进行加速和减速效果的时间。因此，为了实现这个效果，咱们须要定义动画将要移动的速度。这里有一些咱们常见的动画时间属性的选项值，例如：initial, inherit, ease, ease-in, ease-out, 还有linear等等。

引用： https://i.stack.imgur.com/qyvON.png

 

 

动画时间函数：左（ease）右（linear）

 

以上的选项是很直接的调整动画的方法。然而经过自定义贝塞尔曲线的值，能够知足你具体的动画时间需求。

 

 

关于如何使用贝塞尔曲线的方法咱们能够经过查看Mozilla的开发者网站

 

 

3. 动画延时 （Animation Delay）

动画延时经常应用于当咱们须要对动画进行的延时操做的时候。即当某个动画被触发了，而后延时1S后开始执行。例如： 咱们对“Send FeedBack"按钮添加了延时处理：

动画延时：左(1秒), 右(2秒)

 

 

 

4. 动画播放状态（Animation Play State）

动画播放状态经常用来控制动画是否须要暂停或者继续。

• 运行（running)： 动画继续
• 暂停（paused）: 动画中止 Demo地址： http://codepen.io/phyesix/pen/apaYXr

5. 动画的循环次数

循环次数指单位时间内，动画所重复执行的次数。

• 无限(infinite)：无限循环
• 指定值(x)：动画重复x次
• 继承(inherit)：继承父级的循环次数 Demo地址： http://codepen.io/phyesix/pen/EZeELr

6. 动画方向（Animation Direction）

动画方向是用于指定动画对象的移动方向。例如是从尺寸0%到100%，仍是从100%到%0，又或者是从0%到100%的大小，而后反转从100%到0%。

• 顺序的(Normal): 指动画从0%到100%顺序执行
• 倒序(Reverse): 动画从100%做为起点位置开始到0%倒序执行
• 交替(Alernate): 动画先从0%变化到100%，而后从100%返回到0%
• 反转-交替(Alternate-reverse): 动画从100%到0%倒序， 而后又从0%前进到100%正序执行 Demo地址： http://codepen.io/phyesix/pen/apaYXr

7. 动画填充模式（Animation Fill Mode）

咱们须要知道，当动画执行结束后，在动画执行期间给对象元素所添加的样式并非永久的。这个样式仅仅是在动画期间被应用而后即被移除。关于动画应用的模式，咱们可使用如下属性值来表示：

• 向后（Backward）: 在动画处于0%时，样式会被应用到元素上
• 向前（Forward）: 在动画处于100%时，样式会被应用到元素上
• 兼得（Both): 在动画开始和结束时样式会被应用
• 初始值（Initial): 设置这个属性为默认值

 

Demo地址： http://codepen.io/phyesix/pen/PWgqLj

 

8. 将要改变（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个超级属性

在keyframes里，咱们几乎可使用任何的CSS属性。在现在的大部分浏览器中，你能够放心的使用position, scale, rotation, opacity等等属性值。而且这4个属性能够给动画效果带来更高效，更好的性能表现。

引用： https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

 

结语

以上列举的都是些实现CSS动画的基本属性，一旦了解了这些基础，从而更方便的开始进行动画创做。 关于不少你可能感兴趣的CSS动画应用和实例资源，能够查看Codepen的CSS动画单元。

 

翻译地址：http://imziv.com/blog/article/read.htm?id=82

原文连接：https://stories.jotform.com/how-to-use-css-animations-like-a-pro-dfacc1e97338#.tgenux32r