css3中的 @Keyframes

1、介绍

keyframes被称为关键帧，其相似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面跟着是动画名称加上一对花括号“{…}”，括号中是一些不一样时间段样式规则。

语法：@keyframes animationname {keyframes-selector{css-styles;}}

在@keyframes中定义动画名称时，其中0%和100%还能够使用关键词from和to来表明，其中0%对应的是from，100%对应的是to。

在一个“@keyframes”中的样式规则能够由多个百分比构成的，如在“0%”到“100%”之间建立更多个百分比，分别给每一个百分比中给须要有动画效果的元素加上不一样的样式，从而达到

一种在不断变化的效果。

举个栗子：

@keyframes changecolor{
  0%{
    background: red;
  }
  20%{
    background:blue;
  }
  40%{
    background:orange;
  }
  60%{
    background:green;
  }
  80%{
    background:yellow;
  }
  100%{
    background: red;
  }
}
div {
  width: 150px;
  height: 100px;
  background: red;
  color:#fff;
  margin: 20px auto;
}
div:hover {
  animation: changecolor 5s ease-out .2s;
}

 

---

 

二 调用动画

animation-name属性主要是用来调用 @keyframes 定义好的动画。须要特别注意: animation-name 调用的动画名须要和“@keyframes”定义的动画名称彻底一致（区分大

小写），若是不一致将不具备任何动画效果。

注意：须要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。　

/*
注意translate变化的坐标位置
四个角顺时针的坐标(0,0) (100,0) (100,100) (0,100)
由于圆半径为10
因此圆运动的坐标点得在角原来的坐标上-10px
 animation-delay设置0s,这样动画就不会有延迟
*/
@keyframes around{
  0% {
    transform: translate(-10px,-10px);
  }
  25%{
    transform: translate(90px,-10px);
  }
  50%{
    transform: translate(90px, 90px); 
  }
  75%{
    transform:translate(-10px,90px);
  }
  100%{
    transform: translate(-10px,-10px);
  }
}
div {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  border-radius: 100%;
  /*调用动画名*/
  animation-name:around;
  animation-duration: 10s;
  animation-timing-function: ease;
  animation-delay: 0s;
  /*动画无限循环*/
  animation-iteration-count:infinite; 
}

 

---

 

 3、设置动画的播放次数

animation-iteration-count属性主要用来定义动画的播放次数。

语法：animation-iteration-count: infinite | <number> 

默认值为1，取值为infinite时，动画将无限次播放

@keyframes move {
  0%{
    transform: translate(0);
  }
  15%{
    transform: translate(50px,80px);
  }
  30%{
    transform: translate(100px,0);
  }
  45%{
    transform: translate(150px,80px);
  }
  60%{
    transform:translate(200px,0);
  }
  75%{
    transform: translate(250px,80px);
  }
  100%{
    transform: translate(300px,0);
  }
}

div {
  width:320px;
  height: 100px;
  border: 1px solid #000;
  margin: 20px auto;
}
div span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
  animation-name:move;
  animation-duration: 10s;
  animation-timing-function:ease;
  animation-delay:.1s;
  animation-iteration-count:infinite;
}

　　

---

 

4、设置动画播放方向

animation-direction属性主要用来设置动画播放反向

语法：animation-direction:normal | alternate 

• normal是默认值，若是设置为normal时，动画的每次循环都是向前播放；
• 另外一个值是alternate，他的做用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。

在上面栗子的 div span{…}加上animation-direction:alterate, 如图

---

 

5、设置动画的播放状态

animation-play-state属性主要用来控制元素动画的播放状态

有两个参数：running， paused

其中running是其默认值，主要做用就是相似于音乐播放器同样，能够经过paused将正在播放的动画停下来，也能够经过running将暂停的动画从新播放，这里的从新播放不必定

是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外若是暂停了动画的播放，元素的样式将回到最原始设置状态。

@keyframes move {
  0%{
    transform: translateY(40px);
  }
  15%{
    transform: translate(40px,40px);
  }
  30%{
    transform: translate(40px,80px);
  }
  45%{
    transform: translate(40px,40px);
  }
  60%{
    transform: translate(40px,0);
  }
  75%{
    transform: translate(40px,40px);
  }
  90%{
    transform: translate(80px,40px);
  }
  100%{
    transform: translateY(40px);
  }
}

div {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px auto;
}
span {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: orange;
  transform: translateY(90px);
  animation-name: move;
  animation-duration: 10s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
   animation-play-state:paused;
}
div:hover span {
  animation-play-state:running;
}

---

 

6、设置动画时间外属性

animation-fill-mode属性定义在动画开始以前和结束以后发生的操做。有四个属性值：none | forwards | backwords |both

好比，若是想让动画停在最后一幀处:animation-fill-mode:forward;