CSS3 动画 animation

606 阅读3分钟

一、创建动画前首先我们要了解什么是 animation

animation 是 css3 的新属性,尚处于实验阶段,各种不同内核的浏览器都在进行试验中,也就是说 animation 在不同的浏览器中其支持程度、运行效果等方面是存在差别的,因此为了保证网页在各种浏览器中的兼容性,就要给 animation 添加各种浏览器特有的前缀,比如说 -webkit-animation 只有 webkit 内核的浏览器才能识别并执行,其他则会自动忽略。

目前,IE10+、Firefox 以及 Opera 都已支持标准的 animation 属性,而 Safari 和 Chrome(它们都是 webkit 内核)则只支持 -webkit-animation 属性,所以你的代码简写成以下即可:

-webkit-animation: animations 2s ease-out 1s backwards;
animation: animations 2s ease-out 1s backwards;

1.1 animation 的语法:

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

1.2 animation 的取值:

animation-name / animation-duration / animation-timing-function / animation-delay / 
animation-iteration-count / animation-direction / animation-fill-mode / animation-play-state / 

animation-name:

指定要绑定到选择器的关键帧的名称

animation-duration:

动画花费的时间,设置为 0 则不执行

time:       指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果。

animation-timing-function:

指定动画将如何完成一个周期。

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

animation-delay:

动画延迟开始时间 设置为 0 则不延迟

time:      可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0

animation-iteration-count:

定义动画的循环次数

n:         一个数字,定义应该播放多少次动画
infinite:  指定动画应该播放无限次(永远)

animation-direction:

定义是否循环交替反向播放动画。

normal:	                默认值。动画按正常播放。
reverse:                动画反向播放。
alternate:	        动画在奇数次(135...)正向播放,在偶数次(246...)反向播放。
alternate-reverse:	动画在奇数次(135...)反向播放,在偶数次(246...)正向播放。
initial:                设置该属性为它的默认值。	
inherit:                从父元素继承该属性。

animation-fill-mode

定义当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

none:	     默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards:    在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。
backwards:   动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都 
             是from 关键帧中的值(当 animation-direction 为 "normal""alternate" 时)或 to 关键
             帧中的值(当 animation-direction 为 "reverse""alternate-reverse" 时)。
both:	     动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
initial:     设置该属性为它的默认值。
inherit:     从父元素继承该属性。

animation-play-state

指定动画是否正在运行或已暂停。

paused	    指定暂停动画
running	    指定正在运行的动画

二、了解 animation 后我们在来谈谈如何创建动画:

第一步:

首先我们要通过 @keyframes 来创建动画,同时必须还要跟上动画名称,比如 mycolor

其次再指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式

例:

@keyframes mycolor {

    /* 起始 */
    from {
        background-color: darkseagreen;
    }

    /* 结束 */
    to {
        background-color: deeppink;
    }
}

第二部:

通过 animation 绑定到选择器中,同时至少要有动画名称和动画变化的时长

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box1 {
            width: 500px;
            height: 300px;
            background-color: darkseagreen;
            animation: mycolor 3s infinite;
        }

        @keyframes mycolor {

            /* 起始 */
            from {
                background-color: darkseagreen;
            }

            /* 结束 */
            to {
                background-color: deeppink;
            }
        }

    </style>
</head>

<body>
    <div class="box1"></div>
</body>

为了更精确的效果,可将 from、to 改为百分数

如:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes myanimation {
            0% {
                background-color: rgb(219, 163, 219);
                left: 0;
                top: 0;
            }

            20% {
                background-color: greenyellow;
                left: 200px;
                top: 200px;
            }

            50% {
                background-color: indianred;
                left: 150px;
                top: 70px;
            }

            80% {
                background-color: lightseagreen;
                left: 50px;
                top: 200px;
            }

            100% {
                background-color: rgb(219, 163, 219);
                left: 0;
                top: 0;
            }
        }

        .box2 {
            width: 100px;
            height: 100px;
            background-color: rgb(219, 163, 219);
            position: absolute;
            animation: myanimation linear 5s infinite;
        }
    </style>
</head>

<body>
    <div class="box2"></div>
</body>