CSS3 - animate

animation

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

[屬性]

animation 属性是一个简写属性，用于设置六个动画属性：

animation: name duration timing-function delay iteration-count direction;

屬性	說明
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。(填寫次數或 infinite無限撥放)
animation-direction	规定是否应该轮流反向播放动画。 (normal默認正常，alternate反向)
animation-play-state	规定动画是否正在运行或暂停。(默认是 "running"。paused 暫停)
animation-fill-mode	规定对象动画时间之外的状态。动画在播放之前或之后，其动画效果是否可见。

e.g. :

animation: jumpMethod 1.5s ease 0s infinite normal;

屬性	說明
animation-name	keyframe 名称。 jumpMethod
animation-duration	完成动画所花费的时间。1.5s
animation-timing-function	规定动画的速度曲线。 ease
animation-delay	规定在动画开始之前的延迟。 0s
animation-iteration-count	规定动画应该播放的次数。 infinite
animation-direction	规定是否应该轮流反向播放动画。 normal

[keyframe]

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

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

值	描述
animationname	必需。定义动画的名称。
keyframes-selector	必需。动画时长的百分比。
css-styles	必需。一个或多个合法的 CSS 样式属性。

keyframes-selector合法的值：

0-100%
from（与 0% 相同）
to（与 100% 相同）

@keyframes animateMethod{  from {left:0px;}  to {left:300px;}}
@-moz-keyframes animateMethod{  from {left:0px;}  to {left:300px;}}
@-webkit-keyframes animateMethod{  from {left:0px;}  to {left:300px;}}
@-o-keyframes animateMethod{  from {left:0px;}  to {left:300px;}}
/*等同於*/
@keyframes animateMethod{  0% {left:0px;}  100% {left:300px;}}
@-moz-keyframes animateMethod{  0% {left:0px;}  100% {left:300px;}}
@-webkit-keyframes animateMethod{  0% {left:0px;}  100% {left:300px;}}
@-o-keyframes animateMethod{  0% {left:0px;}  100% {left:300px;}}

ㄧ次改變多個:

@keyframes mymove
{
  0%   {
    top:0px; 
    background:red; 
    width:100px;
  }
  50% {
    top:300px; 
    background:green; 
    width:50px;
  }
  100% {
    top:200px; 
    background:yellow; 
    width:300px;
  }
}

[animation-timing-function]

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

div{
  width:100px;
  height:50px;
  background:red;
  color:white;
  font-weight:bold;
  position:relative;
  animation:mymove 5s infinite;
}
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

@keyframes mymove{
  from {left:0px;}
  to {left:300px;}
}

特效

[跳動]

<div class="gradientBox">
  <div class="jump"></div>
</div> 
<style>
.gradientBox div{
  width: 130px;
  height: 130px;
  background: #000;
}
.gradientBox .jump{
    -webkit-animation: jumpMethod 1.5s ease 0s infinite normal;
    animation: jumpMethod 1.5s ease 0s infinite normal;
}
@keyframes jumpMethod {
    0%  {transform: translateY(0); }
    20% {transform: translateY(0);}
    40% {transform: translateY(-30px);}
    50% {transform: translateY(0);}
    60% {transform: translateY(-15px);}
    80% {transform: translateY(0);}
    100% {transform: translateY(0);}
}
</style>

參考

W3School - CSS3 animation 属性

http://www.w3school.com.cn/cssref/pr_animation.asp

animate