css动画
2021-07-13 17:05
标签：support 动画效果 css code anim 创建 动画 safari rip 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3 动画 如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -webkit-。 注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。 当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器： 把 "myfirst" 动画捆绑到 div 元素，时长：5 秒： css动画 标签：support 动画效果 css code anim 创建 动画 safari rip 原文地址：http://www.cnblogs.com/heysng123456/p/7078281.htmlCSS3 @keyframes 规则
浏览器支持
属性
浏览器支持
@keyframes
animation
实例
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}
@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}
CSS3 动画
实例
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
上一篇：web