Heim > Artikel > Web-Frontend > 学习CSS3动画（animation）

学习CSS3动画（animation）

高洛峰Original: 2016-10-09 16:12:561077Durchsuche

CSS3就是出了不少高大上的功能，3D效果、动画、多列等等。今天写篇文章记录怎么一下怎么用CSS3写一个动画。

丑话还得说前头，IE9以及以下版本不支持CSS3动画（如真要实现可以考虑用js，不过估计效果也不太好）。chrome和safafi建议加上前缀-webkit-以向前兼容老版本。

　今天简单的做一个动画。

首先，先简单画一个div,然后添上背景图片。

<body>
    <div class="demo">
        我是demo    </div></body>

.demo{
    width: 120px;
    height: 120px;
    margin: 100px auto;
    background: url(img/demo.jpg) no-repeat;
}

一个普通的DIV就出来了如右:

接着我们让它动起来

先写一个方法，这个方法描述这个图片该如何运动

@keyframes run_animation{      
    from {
        transform: rotatez(0deg);
    }
    to {
        transform: rotatez(360deg);
    }
}

这个animation_run就是这个方法的名字。等下需要把名字关联到相关的元素里。

from是描述动画的起始状态，to是动画的结束状态。

所以这个方法就是让一个元素按顺时针方向转动360度，非常简单。

from to往往不能满足我们日常开发所需，所以还有这种写法

@keyframes run_animation{
    0%{<br>　　　　 transform:rotatex(0deg);<br>　　 }
    16%{
        transform: rotatey(-90deg);
    }
    33%{
        transform: rotatey(-90deg) rotatez(135deg);
    }
    50%{
        transform: rotatey(225deg) rotatez(135deg);
    }
    66%{
        transform: rotatey(135deg) rotatex(135deg);
    }
    83%{
        transform: rotatex(135deg);
    }<br>　　100%{<br>　　　　 transform: rotatex(0deg);<br>　　}
}

这种描述让动画可以有更加丰富炫酷的动作。通过百分比来描述每个阶段该元素的动态,0%就是上面说的from，100%就是to。其实这个也很简单对吧~

动画就这么容易的写好了。接下来我们把动画关联到我们的图片上。

.demo{
    width: 120px;
    height: 120px;
    margin: 100px auto;
    animation: run_animation 12s linear infinite; /*关联动画名称，定义动画时长，动画播放速度曲线，播放次数*/
    background: url(img/demo.jpg) no-repeat 100%;
}

就是这么简单一句代码，图片就能按照我们定义的方法动起来了。

要是你现在发现动画没有动，那可能是下面的原因之一：

1.动画名称与@keyframes定义的名称不符；

2.没有定义动画播放时长，默认是0S，即不播放动画。上述代码定义12S；

3.在IE9及以下浏览器运行该代码，IE9及以下不支持CSS3 animation；

4.动画方法定义不对，方法定义的每个阶段中样式都是一样的。像下面这样

@keyframes run_animation{
    0%{
        transform: rotatez(90deg);
    }
    50%{
        transform: rotatez(90deg);
    }
   100%{
        transform: rotatez(90deg);
    }
}

好了，这时候动画应该是动起来了。接着说动画中别的选项：

1.animation-iteration-count: 动画播放次数，想播放几次就写几。我这里用了无限次就是infinite

2.animation-timing-function:动画速度曲线。这个速度曲线有点复杂，涉及到一个贝塞尔函数。不想深入探索贝塞尔就直接用现成的linear、ease、ease-in、ease-out、ease-in-out。要是你懂贝塞尔，可以用cubic-bezier(n,n,n,n)，这个比较高大上，我觉得是装逼界的利器。

3.animation-delay:动画可以延时播放，参数也是n S。和animation-duration不一样，animation-duration是动画播放时长。

上面几个属性都可以简写到animation中，就像我上面的栗子一样。

还有逆向播放、暂停这些属性就不说了，有需要可以去看http://www.w3school.com.cn/css3/css3_animation.asp或者

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：css之浮动Nächster Artikel：CSS3 media queries结合jQuery实现响应式导航

In Verbindung stehende Artikel

Mehr sehen