淘先锋技术网

首页 1 2 3 4 5 6 7

css3动画属性解析:【animation -动画】

 二：css3动画之--------animation 

语法（简写方式）：

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

div{
    animation:mymove 2s ease-in-out 3s infinite alternate running;
}

那么这里的意思就是mymove动画将在三秒钟后开始，以两秒一个循环慢-快-慢方式，进行动画的展示，并且每次动画过后都会向相反方向执行动画。

下面我们来一一看下这些属性：

值语法
@keyframes定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
animation-name检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
animation-duration检索或设置对象动画的持续时间
animation-timing-function检索或设置对象动画的过渡类型
animation-delay检索或设置对象动画的延迟时间
animation-iteration-count检索或设置对象动画的循环次数
animation-direction检索或设置对象动画在循环中是否反向运动
animation-play-state检索或设置对象动画的状态

 

 

 

 

 

 

 

 1：@keyframes：定义一个动画，定义的动画名称用来被animation-name所使用。

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation:mymove 2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}

 

@keyframes主要是做关键帧动画的，每个@keyframes后面都要跟一个名字，事例中使用了mymove作为帧动画的名字，然后可以在样式内对关键帧添加样式，然后根据关键帧 @keyframes就能自动形成流畅的动画了。 

2：animation-name：检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}

在animation-name使用之前，我们已经定义了一个名为mymove的帧动画，这里把帧动画的名字作为了animation-name的值，含义是当前元素将执行所设置的帧动画。

3：animation-duration：检索或设置对象动画的持续时间

继续看上一个案例，仅仅有帧动画和需要执行的动画名称是不足以形成动画的，我们还需要设置一个动画执行所需要的时间，这里就用到了animation-duration属性，所以上一案例所展示的时间为两秒钟执行一次。

4：animation-timing-function：检索或设置对象动画的过渡类型

div{
    width:100px;
    height:50px;
    background:#f40;
    position:relative;
    animation-name:mymove;
    animation-duration:3s;
    animation-timing-function:ease-in-out;
}
@keyframes mymove{
    0% {left:0px;}
    100% {left:300px;}
}

animation-timing-function的作用就是改变动画在每一帧的快慢。这里transition-timing-function仅展示值为ease-in-out的动画效果，可以理解为慢-快-慢。其他的不做展示，可以参考下表进行理解。

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

 

 

 

 

 

 

 

 

 

5：animation-delay：检索或设置对象动画的延迟时间

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-delay:2s;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}

 

 这里animation-delay的值为2s，意思是动画将在延迟两秒秒后延迟执行。

 6：animation-iteration-count：检索或设置对象动画的循环次数

div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}

@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}

 

这里animation-iteration-count的值为infinite，意思是动画将会无限次的执行，这也就达到了循环的效果，当然你还可以给它具体的数值（比如2），当执行你设置的次数后它会自动停止。

7：animation-direction：检索或设置对象动画在循环中是否反向运动

div{
    width:100px;
    height:50px;
    background:#f40;
    position:relative;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
}

@keyframes mymove{
    0% {left:0px;}
    100% {left:300px;}
}

 

 这里animation-direction的值为alternate，代表动画将会来回的反复执行，他还有其它属性，在下表给出供小伙伴们自己尝试。

值描述
normal默认值。动画按正常播放。
reverse动画反向播放
alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。
initial设置该属性为它的默认值。
inherit从父元素继承该属性。

 8：animation-play-state：检索或设置对象动画的状态

 

 

<style>
div{
    width:50px;
    height:50px;
    background:#f40;
    border-radius:50%;
    animation-name:mymove;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
@keyframes mymove{
    0%   {width:50px;height:50px;}	
    50%   {width:100px;height:100px;}	
    100%   {width:50px;height:50px;}
}
</style>
<body>
    <button onclick="pause()">暂停</button>
    <button onclick="run()">恢复</button>
    <div></div>
</body>

function pause(){
    document.querySelector('div').style.animationPlayState="paused"
}
function run(){
    document.querySelector('div').style.animationPlayState="running"
}

animation-play-state的默认值为running，就是动画执行的意思，在实际应用中我们经常使用js来操作这个属性，从而控制动画的播放和暂停。