测试2

注：原文有较大改动

使用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)

 

pic0

 

当动画已经在(@keyframes)中定义好后，我们可以控制以下几样东西：

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

以下是实现示例：

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

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

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

 

2. 动画时间（Animation Timing)

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

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

 

 

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

 

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

 

pic6

 

关于如何使用贝塞尔曲线的方法我们可以通过查看Mozilla的开发者网站