css-@keyframes动画

最新推荐文章于 2025-10-10 23:20:49 发布

转载最新推荐文章于 2025-10-10 23:20:49 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hwaggLee/p/5207543.html

本文详细介绍如何使用@keyframes规则和animation属性创建跨浏览器兼容的CSS动画效果。包括InternetExplorer10、Firefox、Opera、Chrome和Safari等主流浏览器的支持情况及前缀使用指南。

详细w3c这里

http://www.cnblogs.com/happyPawpaw/archive/2012/09/12/2681348.html

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

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

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>
</html>