css-@keyframes动画

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css-@keyframes动画相关的知识，希望对你有一定的参考价值。

详细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>

 

以上是关于css-@keyframes动画的主要内容，如果未能解决你的问题，请参考以下文章

CSS @keyframes 光标动画在悬停时闪烁

CSS3 @keyframes动画

CSS 参考手册

在 React 应用程序中添加 CSS @keyframes 动画以更改状态

@keyframes 动画在 Firefox 55.03 中不起作用

为啥这个 CSS @keyframes 规则不交叉淡入淡出？