CSS3 动画属性
@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;}
}注：目前浏览器都不支持 @keyframes 规则；Firefox 支持替代的 @-moz-keyframes 规则；Opera 支持替代的 @-o-keyframes 规则；Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则。
@keyframes 语法
html与css代码:div匀速向下运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>index</title>
<meta name="description" content="">
<meta name="author" content="boonya">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<style>
div {
width: 200px;
height: 200px;
background-color: #39B940;
position:relative;
-moz-animation:mymove 5s infinite;/*infinite无限循环*/
}
@-moz-keyframes mymove{
from{top:0px;}
to{top:300px;}
}
</style>
</head>
<body>
<div>
<p>我是小妞妞。</p>
</div>
</body>
</html>
效果图
注：图片为静态，效果为动态，请参考http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes
带有多个 CSS 样式的多个 keyframe 选择器,html与css代码
<style>
div {
width: 200px;
height: 200px;
background-color: #39B940;
position:relative;
-moz-animation:mymove 5s infinite;
border-radius:25px;
}
@-moz-keyframes mymove{
0% {top:0px;
left:0px;
background:#A217A2;}
25% {top:0px;
left:100px;
background:#0FC646;}
50% {top:100px;
left:100px;
background:#DEAF24;}
75% {top:100px;
left:0px;
background:#0FC646;}
100% {top:0px;
left:0px;
background:#A217A2;}
}
</style>版权声明：本文为boonyaxnn原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。