CSS3动画教程-优快云博客

CSS3 动画

通过CSS3动画，我们能够创建动画，这可以在许多网页中取代动画图片、Flash动画以及JavaScript。

CSS3 @Keyframes 规则

如果需要在 CSS3 中创建动画，首先需要学习 @Keyframes 规则。

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

浏览器支持问题

Chrome 和 Safari 需要加前缀 -webkit- 。Internet Explorer 10、Firefox 以及 Opera 支持 @Keyframes 规则和 animation 属性。

注：Internet Explorer 9 以及更早的版本，不支持 @Keyframes 规则或 animation 属性。

例：

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

CSS3 动画

当我们在 @Keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定一下至少两项 CSS3 动画属性，即可将动画绑定到选择器：

（1）规定动画的名称

（2）规定动画的时长

例：

将 “myfirst” 动画捆绑到 div 元素，时长：5秒：】

div
{
     animation: myfirst 5s;
     -moz-animation: myfirst 5s;	/* Firefox */
     -webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
     -o-animation: myfirst 5s;	        /* Opera */
}

注：必须定义动画的名称和时长。如果忽略时长，则动画不会允许，因为默认值是 0 。

什么是 CSS3 中的动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

我们可以改变任意多的演示任意多的次数。

使用百分比来规定变化发生的时间，或者用关键词 “from.......to” ，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到浏览器支持的最佳效果，我们应该始终定义 0% 和 100% 选择器。

例：

当动画为 25% 及 50% 的时候，改变它的背景色，然后当动画 100 % 完成时再次改变：

@keyframes myfirst{
          0%   {background: red;}
          25%  {background: yellow;}
          50%  {background: blue;}
          100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */{
          0%   {background: red;}
          25%  {background: yellow;}
          50%  {background: blue;}
          100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */{
          0%   {background: red;}
          25%  {background: yellow;}
          50%  {background: blue;}
          100% {background: green;}
}

@-o-keyframes myfirst /* Opera */{
          0%   {background: red;}
          25%  {background: yellow;}
          50%  {background: blue;}
          100% {background: green;}
}

改变背景色和位置：

@keyframes myfirst{
          0%   {background: red; left:0px; top:0px;}
          25%  {background: yellow; left:200px; top:0px;}
          50%  {background: blue; left:200px; top:200px;}
          75%  {background: green; left:0px; top:200px;}
          100% {background: red; left:0px; top:0px;}
}

@-moz-keyframes myfirst /* Firefox */{
          0%   {background: red; left:0px; top:0px;}
          25%  {background: yellow; left:200px; top:0px;}
          50%  {background: blue; left:200px; top:200px;}
          75%  {background: green; left:0px; top:200px;}
          100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */{
          0%   {background: red; left:0px; top:0px;}
          25%  {background: yellow; left:200px; top:0px;}
          50%  {background: blue; left:200px; top:200px;}
          75%  {background: green; left:0px; top:200px;}
          100% {background: red; left:0px; top:0px;}
}

@-o-keyframes myfirst /* Opera */{
          0%   {background: red; left:0px; top:0px;}
          25%  {background: yellow; left:200px; top:0px;}
          50%  {background: blue; left:200px; top:200px;}
          75%  {background: green; left:0px; top:200px;}
          100% {background: red; left:0px; top:0px;}
}

CSS3 动画属性

下表中列出了 @Keyframes 规则和所有动画属性：

下面的两个例子设置了所有动画属性：

运行名为 myfirst 的动画，其中设置了所有动画属性：

div{
        animation-name: myfirst;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
        /* Firefox: */
        -moz-animation-name: myfirst;
        -moz-animation-duration: 5s;
        -moz-animation-timing-function: linear;
        -moz-animation-delay: 2s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-direction: alternate;
        -moz-animation-play-state: running;
 /* Safari 和 Chrome: */
        -webkit-animation-name: myfirst;
        -webkit-animation-duration: 5s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-delay: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-play-state: running;
        /* Opera: */
        -o-animation-name: myfirst;
        -o-animation-duration: 5s;
        -o-animation-timing-function: linear;
        -o-animation-delay: 2s;
        -o-animation-iteration-count: infinite;
        -o-animation-direction: alternate;
        -o-animation-play-state: running;
}

例：与上面的动画相同，但是使用了简写的动画 animation 属性：

div{
         animation: myfirst 5s linear 2s infinite alternate;
         /* Firefox: */
         -moz-animation: myfirst 5s linear 2s infinite alternate;
         /* Safari 和 Chrome: */
         -webkit-animation: myfirst 5s linear 2s infinite alternate;
         /* Opera: */
         -o-animation: myfirst 5s linear 2s infinite alternate;
}

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>动画</title>
    <style type="text/css">
        /* 上面的旋转动画代码 */
        /* 定义动画，动画名：animat_rotate，可以取任意名字 */
        /* 使用方式：animation: run 6s linear; */
        @keyframes animat_rotate {
            from {
                /* 动画刚开始，角度 */
                transform: rotate(0deg);
            }
            to {
                /* 动画结束时，角度 */
                transform: rotate(360deg);
            }
        }

        /* ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== */

        /* 下面的宽高变化动画代码 */

        /* 定义动画，动画名：animat_changeWH，可以取任意名字 */
        /* 使用方式：animation: animat_changeWH 6s linear; */
        @keyframes animat_changeWH {
            0% {
                /* 动画刚开始，div的宽高 */
                width: 200px;
                height: 200px;
            }
            50% {
                /* 动画执行一半时，div的宽高 */
                width: 100px;
                height: 400px;
            }
            100% {
                /* 动画执行完毕时，div的宽高 */
                width: 200px;
                height: 200px;
            }
        }
    </style>
</head>
<body>
<!-- animat_rotate：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: animat_rotate 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background: url('http://file.popoho.com/wzfzl/20160706/q0rafysiogkco140510110S8-25.jpg') no-repeat;"></div>

<!-- animat_changeWH：动画名；6s：总执行时间；linear：平滑；infinite：无限重复（去了，只执行一次）-->
<div style="animation: animat_changeWH 6s linear infinite; width: 200px; height: 200px; margin: 64px 64px; background-color: green;"></div>
</body>
</html>