CSS3 动画

时间 2019-11-08

标签 css3 css 动画栏目 CSS 繁體版

原文原文链接

概览

经过 CSS3，咱们可以建立动画，这能够在许多网页中取代动画图片、Flash 动画以及 JavaScript。css

因为是CSS3 嘛，因此部分旧版本浏览器固然没法完美呈现，节哀。html

小试牛刀

学习任何东西都须要有必定的成就感才会有继续学习的动力，先别管那么多，先让咱们的动画动起来。css3

<!DOCTYPE html>
<html>
<head>
<style>
    @keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }
    /* Firefox */
    @-moz-keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }
    /* Safari and Chrome */
    @-webkit-keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }
    /* Opera */
    @-o-keyframes myfirst {
        from {background:red;}
        to {background:yellow;}
    }

    div {
        width:100px;
        height:100px;
        margin: 50px auto;
        background:red;
        animation:myfirst 5s;
        -moz-animation:myfirst 5s; /* Firefox */
        -webkit-animation:myfirst 5s; /* Safari and Chrome */
        -o-animation:myfirst 5s; /* Opera */
    }
</style>
</head>
<body>

<div></div>

</body>
</html>

是否是很简单，很炫酷呀？web

实现CSS3 动画须要至少如下几个条件：浏览器

使用 @keyframes 建立动画并命名函数
使用 animation简写属性或其余具体属性调用动画并设置动画时长工具
将 animation 绑定到某个选择器上学习

下面具体介绍各相关属性吧。动画

建立动画 `@keyframes`

经过 @keyframes 规则，您可以建立动画。spa

建立动画的原理是将一套 CSS 样式逐渐变化为另外一套样式。

在动画过程当中，您可以屡次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者经过关键词 from 和 to来规定改变发生的时间。

0% 是动画的开始时间，100% 动画的结束时间。

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

@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;}
}
/* Firefox */
@-moz-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;}
}
/* Safari 和 Chrome */
@-webkit-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;}
}
/* Opera */
@-o-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;}
}

调用动画 `animation`

上面咱们使用 @keyframes 建立了动画，接下来咱们来调用动画。

上面也说了，调用动画最基本的是动画名称和动画花费的时间，下面将具体介绍动画调用的相关属性。

`animation-name`

指定要调用的动画。

animation-name: keyframename | none;

none 规定无动画效果（可用于覆盖来自级联的动画）。

keyframename 命名遵循以下规则：

名字能够是字母，数字，_ 或 -,区分大小写，只能以字母或单-开头，不能使用none,unset,initial,inherit关键字。

`animation-duration`

animation-duration 属性定义动画完成一个周期所须要的时间，以秒或毫秒计。

animation-duration: 2s; /*等价于 2000ms*/

`animation-timing-function`

animation-timing-function 规定动画的速度曲线。

animation-timing-function: value;

此属性值使用名为三次贝塞尔（Cubic Bezier）函数的数学函数来生成速度曲线。

有以下值可选：

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

5 个预约义关键字对应的贝塞尔函数为：

linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out: cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

简单体会一下 5 种速度曲线的效果：

想亲自去体验各类值对速度的影响，请移步这里：贝塞尔速度曲线

`animation-delay`

animation-delay 属性定义动画什么时候开始。

animation-delay: time;

值以秒或毫秒计。容许负值，-2s 使动画立刻开始，但跳过 2 秒进入动画。

`animation-iteration-count`

animation-iteration-count 属性定义动画的播放次数。

animation-iteration-count: n | infinite;

n 表示具体的次数，默认为1，infinite 规定无限次播放。

`animation-direction`

animation-direction 属性定义是否应该轮流反向播放动画。

animation-direction: normal | reverse | alternate | alternate-reverse;

两个关键字可选，normal 表示动画正常播放，默认值，从 0% -> 100% 再从 0% -> 100%. reverse 与 normal 相反，从 100% -> 0% 再从 100% -> 0%. alternate 表示轮流反向播放，从 0% -> 100% 再从 100% -> 0% 再从 0% -> 100%. alternate-reverse 与 alternate 相反。

`animation-fill-mode`

通俗的讲就是动画结束以后保持什么状态。

有四个值可选，而且容许由逗号分隔多个值。

none 表示不设置结束以后的状态，默认状况下回到跟初始状态同样。
forwards 当动画完成后，保持整个动画结束时的状态。
backwards 明确设置动画结束以后回到初始状态。
both 表示设置为结束或者开始时候的状态。通常都是回到默认状态。

逗号分隔的多个值用来分别设置多个动画。

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

`animation-play-state`

animation-play-state 属性规定动画正在运行仍是暂停。

animation-play-state: paused | running;

paused 表示动画正在暂停，动画不会动。running 表示动画正在动，默认。

`animation`

此属性为上述七个具体属性的简写属性。

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

小结

对CSS3 动画先简单了解这么多，后续可能有新内容再补充。

CSS3 动画

概览

小试牛刀

建立动画 @keyframes

调用动画 animation

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-fill-mode

animation-play-state

animation

小结

参考资料