前端基础之css动画

说到动画，其实很多人心中都会有一种抵触的情绪 总是认为动画并不是项目内需要的。并且动画也不一定是项目内必须的东西，所以很多人并不是很在意这个玩意儿。但是我想说的是：区别一个人的价值并不是在完成项目的能力，而是将项目优化的程度。而动画正式如此，他并不是你的必须品 但是能让你的能力更上一个台阶。

一、 什么是动画？

说到动画，在很多的眼里 都会认为动画是一个可有可无的东西。因为在很多程序员的日常开发中，动画基本都是没有被用到的。我们这里来谈到动画会不会有点多余呢？

正如我前面说到，动画并不是项目中的必需品，但却是项目的润滑剂。因为它能很大程度上能增强用户的体验。说了这么多，究竟动画是什么呢？

动画是使元素从一种样式逐渐变化为另一种样式的效果。并且动画能够改变任意多的样式任意多的次数。

怎么理解这句话呢？就直接从动画的属性开始说起吧。

二、 谈一谈动画的基础属性

前面一个小节，简单介绍了一下动画究竟是什么。这章我就用动画的api来讲讲解一下动画的定义。首先来看下面一段代码：

// css
@keyframes move {
  from {
    top:0px;
  }
  to{
    top: 20px
  }
}
.test {
  width: 10px;
  height: 10px;
  background-color: red;
  animation-name: move;
  animation-duration: 3s;
  position:relative;
}
// html
<div class="test"></div>

效果如下：

从上面的效果图我们可以发现：原本静止的组件运动了起来。首先我们来谈一谈其中用到动画的属性值：

• @keyframes关键帧
  关键帧的作用是用来创建动画的。而动画的原理就是将一套css样式逐渐变化成另一套样式。他可以接收另种类型的参数：from/to和百分数，其语法为：

@keyframes animationname {keyframes-selector {css-styles;}}

• animation-name
• animation-duration

再一看下面的两个属性：animation-name和animation-duration。其含义分别代表动画的名称和一组动画完成的时间。从这两个命名的规则是不是让我们想起了之前讲过的过渡呢？

我想说是的：不仅这两个属性的含义和过渡中的两个属性类似，并且还包含过渡中的另外两个属性：

• animation-timing-function：动画的速度曲线。默认是 “ease”
• animation-delay:动画执行的延时时间

以上这四个属性的含义和使用的方法和前面一篇文章的过渡用法类似，这里我就不多加赘述了。那么既然这里都说了，动画的效果和过渡差不多 那么我们为什么还要花费心思来创造出动画呢？来仔细看我细细为您讲解出来吧，首先来看下面一段代码：

@keyframes move {
  0% {
    top:0px;
  }
  25%{
    top: 20px
  }
  50% {
    top: 40px
  }
  75% {
    top: 20px
  }
  100% {
    top:0;
  }
}
.test {
  width: 20px;
  height: 20px;
  background-color: red;		
}
.test:hover{
  animation-name: move;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  position:relative;
}

效果如下：