您的位置：首页 > Web前端 > CSS

CSS3 基础（007_动画）

2016-11-04 19:21 267 查看
原始网址：http://www.w3schools.com/css/css3_animations.asp

翻译：

CSS3 动画（CSS3 Animations）

CSS3 动画（CSS3 Animations）

CSS3 animations
允许在不使用 
JavaScript
或 
Flash
的情况下对元素添加动画效果！

<!DOCTYPE html>
<html>
<head>
<style>
#animated_div {
animation: 5s ease 0s normal none 1 running animated_div;
background: #92b901 none repeat scroll 0 0;
border-radius: 5px;
color: #ffffff;
font-size: 20px;
font-weight: bold;
height: 47px;
padding: 10px;
position: relative;
width: 76px;
}

@keyframes animated_div {
0% {
left: 0;
transform: rotate(0deg);
}
25% {
left: 0;
transform: rotate(20deg);
}
50% {
left: 500px;
transform: rotate(0deg);
}
55% {
left: 500px;
transform: rotate(0deg);
}
70% {
background: #1ec7e6 none repeat scroll 0 0;
left: 500px;
transform: rotate(0deg);
}
100% {
left: 0;
transform: rotate(-360deg);
}
}

@keyframes animated_div {
0% {
left: 0;
transform: rotate(0deg);
}
25% {
left: 0;
transform: rotate(20deg);
}
50% {
left: 500px;
transform: rotate(0deg);
}
55% {
left: 500px;
transform: rotate(0deg);
}
70% {
background: #1ec7e6 none repeat scroll 0 0;
left: 500px;
transform: rotate(0deg);
}
100% {
left: 0;
transform: rotate(-360deg);
}
}
@keyframes animated_div {
0% {
left: 0;
transform: rotate(0deg);
}
25% {
left: 0;
transform: rotate(20deg);
}
50% {
left: 500px;
transform: rotate(0deg);
}
55% {
left: 500px;
transform: rotate(0deg);
}
70% {
background: #1ec7e6 none repeat scroll 0 0;
left: 500px;
transform: rotate(0deg);
}
100% {
left: 0;
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div id="animated_div">CSS3<br> <span style="font-size: 10px;">Animation</span></div>
</body>
</html>


Browser Support for Animations

表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。

数字之后跟从 
-webkit-
、
-moz-
或 
-o-
指定带前缀工作的第一个版本号。

属性（Property）




@keyframes43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-
animation43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-
什么是 CSS3 动画？

动画（animation）使得元素从一种样式逐渐地改变为另一种样式。

你可以改变很多 CSS 属性，还可以是任意次改变，取决于你。

使用 CSS3 动画（animation），你必须先给 animation 指定 
keyframes
。

keyframes
在特定的时间里保留相应的样式。

@keyframes 规则（The @keyframes Rule）

当你在 @keyframes 规则内指定 CSS 样式的时候，动画（animation）在特定的时间内从当前样式逐渐地改变为新样式。

为了让动画有效果，你必须将动画绑定到元素上。

下列示例将 
"example"
动画绑定到 
<div>
元素上。动画将持续 4 秒，它将 
<div>
元素的背景色逐渐地从 
"red"
改变为 
"yellow"
：

/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@
-webkit-keyframes example {
from {background-color: red;
}

to {
background-color: yellow;
}

}

/* Standard syntax */
@
keyframes example {
from {background-color: red;
}

to {
background-color: yellow;
}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
</body>
</html>


注意：如果 animation-duration 属性没有被指定，将不会有动画效果，因为默认值为 0 。

在上述示例中，我们已经通过使用 
"from"
和 
"to"
关键字（代表 0% 和 100%，即开始和完成）指定了样式将要变更的时间点。

使用百分比也是可以的。通过使用百分比，你可以添加任意多个样式变更，如你所愿。

下列示例将改变 
<div>
元素的背景色，当动画完成 25%、50% 以及 100% 的时候：

/* The animation code */
@keyframes example {
0%   {background-color: red;}
25%  {background-color: yellow;}
50%  {background-color: blue;}
100% {background-color: green;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {background-color: red;}
25%  {background-color: yellow;}
50%  {background-color: blue;}
100% {background-color: green;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color: red;}
25%  {background-color: yellow;}
50%  {background-color: blue;}
100% {background-color: green;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>


下列示例将改变 
<div>
元素的背景色和位置，当动画完成 25%、50% 以及 100% 的时候：

/* The animation code */
@keyframes example {
0%   {background-color: red; left:0px; top:0px;}
25%  {background-color: yellow; left:200px; top:0px;}
50%  {background-color: blue; left:200px; top:200px;}
75%  {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>


延迟动画（Delay an Animation）

animation-delay 属性指定动画开始的延迟。

下列示例，在动画开始之前有 2 秒延迟：

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>


设置动画的运行次数（Set How Many Times an Animation Should Run）

animation-iteration-count 属性指定动画的运行次数。

下列示例，动画在停止之前将运行 3 次：

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>


下列示例使用 
"infinite"
值让动画永无止息地运行：

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>


Run Animation in Reverse Direction or Alternate Cycles

animation-direction 属性用以指定动画反向运行或以交替循环的方式运行。

下列示例将使动画反向运行：

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: reverse; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: reverse;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>


下列示例使用 
"alternate"
值让动画正向运行、反向运行、再正向运行：

div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>


指定动画的速度曲线（Specify the Speed Curve of the Animation）

animation-timing-function 属性指定动画的速度曲线。

animation-timing-function
属性可以有以下取值：

ease - 指定动画为慢、快、慢的节奏（默认值）

linear - 指定动画为匀速

ease-in - 指定动画为慢开始

ease-out - 指定动画为慢结束

ease-in-out - 指定动画为慢开始、慢结束

cubic-bezier(n,n,n,n) - 自定义贝塞尔曲线函数值

下列示例展示可被使用的不同速度曲线：

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 50px;
background-color: red;
font-weight: bold;
position: relative;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}

/* Safari 4.0 - 8.0 */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}

/* Standard syntax */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}

/* Standard syntax */
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
</head>
<body>

<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>


动画简写属性（Animation Shorthand Property）

下列示例使用 6 个动画属性：

div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
/* Safari 4.0 - 8.0 */
-webkit-animation-name: example;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
/* Standard syntax */
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>


通过使用 animation 简写属性可以达到相同的动画效果：

div {
animation: example 5s linear 2s infinite alternate;
}


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Safari 4.0 - 8.0 */
animation: myfirst 5s linear 2s infinite alternate;
}

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

/* Standard syntax */
@keyframes myfirst {
0%   {background-color:red; left:0px; top:0px;}
25%  {background-color:yellow; left:200px; top:0px;}
50%  {background-color:blue; left:200px; top:200px;}
75%  {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3
相关文章推荐
新的分享
章节导航