css3动画--animation

阅读更多

一）Keyframes被称为关键帧，用来定义动画内容。
语法：
@keyframes changecolor{
  0%{
   background: red;
  }
  100%{
    background: green;
  }
}
二） animation-name 属性主要是用来调用 @keyframes 定义好的动画。
    语法：animation-name: none | IDENT[,none|DENT]*;

三） animation-duration 主要用来设置CSS3动画播放时间，用法和transition-duration类似，是用来指定元素播放动画所持续的时间长。
    语法：animation-duration: [,]*

四） animation-timing-function 属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。
    语法：animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*
  ease        默认值，速度由快到慢，逐渐变慢
  linear      恒速
  ease-in     渐显效果，加速速度越来越快
  ease-out    渐隐效果，减速速度越来越慢
  ease-in-out 渐显渐隐效果，先加速再减速
五） animation-delay 属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样。
    语法：animation-delay:[,]*

六）animation-iteration-count属性主要用来定义动画的播放次数。
    语法：animation-iteration-count: infinite | [, infinite | ]*
常为整数，也可以使用带有小数的数字，默认值为1，意味着动画将从开始到结束只播放一次。取值为infinite，动画将会无限次的播放。

七）animation-direction属性主要用来设置动画播放方向。
    语法：animation-direction:normal | alternate [, normal | alternate]*
     normal是默认值，动画的每次循环都是向前播放；alternate动画播放在第偶数次向前播放，第奇数次向反方向播放。

八）animation-play-state属性主要用来控制元素动画的播放状态。
    running默认值，类似于音乐播放器，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不一定是从元素动画的开始播放，而是从暂停的那个位置开始播放。另外如果暂停了动画的播放，元素的样式将回到最原始设置状态。

九) animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。
    none:默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处
    forwards:表示动画在结束后继续应用最后的关键帧的位置
    backwards:会在向元素应用动画样式时迅速应用动画的初始帧
    both:元素动画同时具有forwards和backwards效果

@-webkit-keyframes move {
  0%{
    transform: translateY(90px);
  }
  15%{
    transform: translate(90px,90px);
  }
  30%{
    transform: translate(180px,90px);
  }
  45%{
    transform: translate(90px,90px);
  }
  60%{
    transform: translate(90px,0);
  }
  75%{
    transform: translate(90px,90px);
  }
  90%{
    transform: translate(90px,180px);
  }
  100%{
    transform: translate(90px,90px);
  }
}
div {
  width: 200px;
  height: 200px;
  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: .2s;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  animation-play-state:paused; 
  -webkit-animation-name: move;
  -webkit-animation-duration: 10s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-delay: .2s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:alternate;
  -webkit-animation-play-state:paused;
}
div:hover span {
  animation-play-state:running;
  -webkit-animation-play-state:running;
}

这里动画也可以简写:

span{animation: move 10s ease-in 2s infinite alternate paused};

效果展示： http://jsfiddle.net/ffg2L548/