实例
使 div 元素匀速向下移动:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题</title>
<link type="text/css" rel="stylesheet" href="test.css"/>
<style type="text/css">
div {
100px;
height: 100px;
background: #ff8fce;
color: snow;
position: relative;
animation: mymove 5s linear;
-moz-animation: mymove 5s linear; /* Firefox */
-webkit-animation: mymove 5s linear; /* Safari and Chrome */
-o-animation: mymove 5s linear; /* Opera */
}
@keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
}
}
@-moz-keyframes mymove /* Firefox */
{
from {
top: 0px;
}
to {
top: 200px;
}
}
@-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {
top: 0px;
}
to {
top: 200px;
}
}
@-o-keyframes mymove /* Opera */
{
from {
top: 0px;
}
to {
top: 200px;
}
}
</style>
</head>
<body>
<div>内存</div>
</body>
</html>
运行结果:(5秒内从上运动到200px,然后自己跳回原点)
浏览器支持
目前浏览器都不支持 @keyframes 规则。
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
定义和用法
通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
语法
@keyframes animationname {keyframes-selector {css-styles;}}
值 | 描述 |
---|---|
animationname | 必需。定义动画的名称。 |
keyframes-selector |
必需。动画时长的百分比。 合法的值:
|
css-styles | 必需。一个或多个合法的 CSS 样式属性。 |
亲自试一试 - 实例
实例 1
在一个动画中添加多个 keyframe 选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>无标题</title>
<link type="text/css" rel="stylesheet" href="test.css"/>
<style type="text/css">
div {
100px;
height: 100px;
background: #ff72cc;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
}
25% {
top: 200px;
}
75% {
top: 50px
}
100% {
top: 100px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
运行结果:(位置自己循环变换)
实例 2
在一个动画中改变多个 CSS 样式:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
background: red;
100px;
}
100% {
top: 200px;
background: yellow;
300px;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
background: red;
100px;
}
100% {
top: 200px;
background: yellow;
300px;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
background: red;
100px;
}
100% {
top: 200px;
background: yellow;
300px;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
background: red;
100px;
}
100% {
top: 200px;
background: yellow;
300px;
}
}
</style>
</head>
<body>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>
运行结果:(自己循环渐变大小和颜色)
实例 3
带有多个 CSS 样式的多个 keyframe 选择器:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
-moz-animation: mymove 5s infinite; /* Firefox */
-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
-o-animation: mymove 5s infinite; /* Opera */
}
@keyframes mymove {
0% {
top: 0px;
left: 0px;
background: red;
}
25% {
top: 0px;
left: 100px;
background: blue;
}
50% {
top: 100px;
left: 100px;
background: yellow;
}
75% {
top: 100px;
left: 0px;
background: green;
}
100% {
top: 0px;
left: 0px;
background: red;
}
}
@-moz-keyframes mymove /* Firefox */
{
0% {
top: 0px;
left: 0px;
background: red;
}
25% {
top: 0px;
left: 100px;
background: blue;
}
50% {
top: 100px;
left: 100px;
background: yellow;
}
75% {
top: 100px;
left: 0px;
background: green;
}
100% {
top: 0px;
left: 0px;
background: red;
}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {
top: 0px;
left: 0px;
background: red;
}
25% {
top: 0px;
left: 100px;
background: blue;
}
50% {
top: 100px;
left: 100px;
background: yellow;
}
75% {
top: 100px;
left: 0px;
background: green;
}
100% {
top: 0px;
left: 0px;
background: red;
}
}
@-o-keyframes mymove /* Opera */
{
0% {
top: 0px;
left: 0px;
background: red;
}
25% {
top: 0px;
left: 100px;
background: blue;
}
50% {
top: 100px;
left: 100px;
background: yellow;
}
75% {
top: 100px;
left: 0px;
background: green;
}
100% {
top: 0px;
left: 0px;
background: red;
}
}
</style>
</head>
<body>
<p><b>注释:</b>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>
运行结果:(自己循环变换位置和颜色)
![](data:image/png;base64,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)