CSS3 @keyframes动画规则

CSS3 动画属性

W3CSchool标准CSS使用语法  *@keyframes 针对不同浏览器兼容

@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匀速向下运动

	
		

		
		

		
		
		

		

		
		
		
		
	
	
		
 
			
我是小妞妞。
		
		
	

效果图

注：图片为静态，效果为动态，请参考http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes

带有多个 CSS 样式的多个 keyframe 选择器,html与css代码

注：图片为静态，效果为动态，请参考 http://www.w3school.com.cn/tiy/t.asp?f=css3_keyframes4