CSS 动画从入门到精通_html/css_WEB-ITnose

## CSS 动画从入门到精通人类的大脑对运动的物体天生敏感。所以为你的网站或者 APP 重要的区域添加动画将会吸引用户的注意力，同时能够让软件用户界面变的更加有趣。   如果动画的效果做得不错，能给软件带来有价值的交互作用和非常有用的反馈、同时能够增强用户的情感体验、带来愉悦的情感并且能够添加充满个性的用户界面。事实上，动画更接地气。  > Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface.富有感情的设计主要目的是便于人与人之间的沟通交流。如果我们把这项工作做得很好，那么用户与电脑之间的交互将变得更加有趣，而不是冰冷冷的机器。——Aarron Walter, Designing For Emotion  ### 网页创建动画的基本步骤css 动画由两部分组成:-  **Keyframes** 定义动画序列- **Animation Properties** 把 ```@Keyframes```分配到指定的 CSS 元素，并且定义这是一种怎样的动画### 步骤1 : Keyframeskeyframes 是 CSS 动画的基础。它们定义了动画在每一个时间点的动画效果。每一个 @keyframes 由以下几部分组成：- **Name of the animation**:描述动画的名称，例如 ```bounceIn```- **动画帧**:每一个关键帧都用一个百分比来表示。0% 表示动画的初始帧，即就是动画的第一刻；100% 代表动画结束的最后时刻；在初始帧和结束帧之间还可以定义多个关键帧。- **CSS属性**:CSS 属性定义在每个关键帧里面，用来展现动画的效果。  接下来让我们实践以下。我们定义了一个简单的 @keyframes ,姑且命名为 ```bounceIn```，它由三个关键帧组成，分别是：初始帧透明度为0并且使用 CSS 的 ```transform``` 缩小到其大小的10% ；第二个关键帧（60%）的样式是变为全透明并且大小变为120% ；结束帧的样式是慢慢地变变为原来的大小。  在测试的过程中把下面这段代码拷贝到 main.css 文件：```@keyframes bounceIn {  0% {    transform: scale(0.1);    opacity: 0;  }  60% {    transform: scale(1.2);    opacity: 1;  }  100% {    transform: scale(1);  }}```### 步骤2 : 动画属性Once the @keyframes are defined, the animation properties must be added in order for your animation to function.  当 ```@keyframes```定义好了之后，接下来就是添加动画的属性啦。  Animation properties do two things:  总而言之动画属性就干两件事：- 动画属性把 ```@keyframes```绑定在需要添加动画的 HTML 元素上。- 动画属性定义了元素效果如何滚动。  动画属性定义在CSS 选择器中或者需要生成动画效果的  HTML 元素标签上，添加如下两种动画属性让动画效果生效。- ```animation-name```:动画的名称，定义在 @keyframes 上- ```animation-duration```:动画持续的时间，使用秒或者毫秒作为基本单位。  我们继续上面```bounceIn```的例子。把 animation-name 和 animation-duration 两个属性添加到需要添加动画效果的 div 上。  ```div {  animation-duration: 2s;  animation-name: bounceIn;}```上面的那段代码可以简写为：```div {  animation: bounceIn 2s;}```### 动画属性简写每个动画属性都能够被独立定义，考虑代码简洁和清晰，我们提倡使用动画属性简写。所有的动画属性都排列在```animation:```属性中，它们的排列顺序如下：  ```animation: [animation-name] [animation-duration] [animation-timing-function][animation-delay] [animation-iteration-count] [animation-direction][animation-fill-mode] [animation-play-state];```请注意，为了使添加的动画属性生效，比如按照上面所列的顺序。还有一点需要注意的是 ```animation-name```和```animation-duration```必须定义。  ### 关于浏览器前缀到现在为止，基于 webkit 的浏览器仍然使用 ``` -webkit-```作为 animation,keyframes,transitions 这些属性的前缀。知道这些浏览器厂商按照标准规范之前，我们前端开发者必须在代码中引用各种 Webkit （为了简洁，这篇文章的代码都没有引入 Webkit 前缀）。  包含 Webkit 前缀的 animation 和 Keyframes```div {  -webkit-animation-duration: 2s;  animation-duration: 2s;  -webkit-animation-name: bounceIn;  animation-name: bounceIn;}@-webkit-keyframes bounceIn { /* styles */ }@keyframes bounceIn { /* styles */ }```便于前端开发者，建议使用[bourbon](http://bourbon.io/) CSS 库，其基于 sass 构建，并且保持与各种浏览器前缀同步。使用 bourbon CSS 库之后，生活变得更加简单了。```div {  @include animation(bounceIn 2s);}@include keyframes(bouncein) { /* styles */}```### 一些常见的动画属性除了 animation-name 和 animation-duration 这两个必备的动画属性之外。我们也可以根据我们的需要结合下面的动画属性自定义各种复杂动画效果。- animation-timing-function- animation-delay- animation-iteration-count- animation-direction- animation-fill-mode- animation-play-state  单独看一下这是动画属性的用法吧。  #### animation-timing-function这个属性定义了动画速度，即通过建立加速度曲线，设置动画在关键帧之间是如何变化。该属性值有：```ease```,```linear```,```ease-in```,```ease-out```,```ease-in-out```,```iniyial```,```inherit```  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-timing.gif "在这里输入图片标题")  animation-timing-function 默认值为```ease```，它的变化为刚开始时慢，然后加速，最后减速结束。- linear 从动画开始到结束匀速变化- ease 默认值，动画刚开始时慢，然后加速，最后减速结束动画- ease-in 由慢到快- ease-out 由快到慢- ease-in-out 由慢到快再到慢- initial 把该属性值设置为默认，即设置为```ease```，请查看[initial用法](http://www.w3schools.com/cssref/css_initial.asp)- inherit animation-timing-function属性值继承父元素，请查看[inherit用法](http://www.w3schools.com/cssref/css_inherit.asp)  css 语法```animation-timing-function:ease-in-out```动画简写语法(推荐使用)```animation:[animation-name][animation-duration][animation-timing-function];animation:bounceIn 2s ease-in-out;```#### animation-delay该属性设置延时，即就是页面元素加载完成之后，动画序列开始执行这段时间。例如其值设置为 2s 那么在元素加载完成之后2s 动画才开始执行。如果其值设置为 -2s 那么当元素加载完成之后动画立即开始，但是直到2s后，才进入动画。需要明确的是其值单位为秒或者毫秒。  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-delay.gif "在这里输入图片标题")  css 语法  ```animation-delay: 5s;```动画简写语法(推荐使用)```animation:[animation-name][animation-duration][animation-timing-function][animation-delay]animation: bounceIn 2s ease-in-out 3s;```#### animation-iteration-count该属性定义了动画执行的次数- ```#```整数指定次数- ```infinite```该动画执行无限次- ```inherit``` 该动画执行的次数继承父元素![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-iteration.gif "在这里输入图片标题")  css 语法```animation-iteration-count:2;```动画简写语法（推荐使用）```animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count];animation: bounceIn 2s ease-in-out 3s 2;```#### animation-direction如果动画循环次数大于1次，那么该属性设置了动画执行完成之后是反向运行还是重新回到元素位置运行。- normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。- reverse 反向运行动画，每周期结束动画由尾到头运行。- alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是集数迭代还是偶数迭代- alternate-reverse 反向交替， 反向开始交替,当奇数周期时动画从 100% 到 0%，当为偶数周期时，动画从 0% 到 100% 执行。  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-direction.gif "在这里输入图片标题")  css 语法```animation-direction:alternate;```动画简写语法（推荐使用）```animation: [animation-name] [animation-duration] [animation-timing-function][animation-delay] [animation-iteration-count] [animation-direction];animation:  bounceIn 2s ease-in-out 3s 3 alternate;```#### animation-fill-mode该属性动画在开始之前或者结束之后是否可见。该属性有点疑惑，但是当你彻底明白之后，会有很大的作用呢。  默认动画在开始之前或者结束之后，动画的样式是不能影响所绑定元素的样式。但是 animation-fill-mode 属性就是为了改变这一性质。其有如下值：  - backwards 在 animation-delay 所指定的一段时间内，在动画显示之前。动画开始帧（0%）的样式将会应用到绑定的元素中。- forwards 当动画结束之后，绑定的元素保持在结束帧（100%）- both 综合了 backwards 和 forwards 效果。- normal 不改变默认行为  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-fill.gif "在这里输入图片标题")  CSS 语法```animation-fill-mode:forwards```动画简写语法```animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode];animation: bounceIn 2s ease-in-out 3s forwards;```#### animation-play-state在动画运行周期，该属性设置了动画状态。其值为如下两者：- playing 设置当前动画播放- paused 设置当前动画停止  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-play.gif "在这里输入图片标题")  例如:```.div:hover{  animation-play-state:paused;}```#### 为一个元素绑定多个动画在实际开发过程中若需要为当个元素绑定多个动画,可以使用逗号。```.div{  animation:sideIn 2s,route 1.75s}```最后推荐一个动画库[animate](http://daneden.github.io/animate.css/)