css中@keyframes有什么用

这篇文章主要介绍css中@keyframes有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

目前创新互联公司已为上1000+的企业提供了网站建设、域名、虚拟主机、网站托管维护、企业网站设计、科尔沁右翼中网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

css@keyframes

作用：通过@keyframes规则，您能够创建动画。

说明：

创建动画的原理是，将一套CSS样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套CSS样式。以百分比来规定改变发生的时间，或者通过关键词"from"和"to"，等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义0%和100%选择器。

注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。

css@keyframes的使用示例

<!DOCTYPEhtml>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:red;

position:relative;

animation:mymove5sinfinite;

-moz-animation:mymove5sinfinite;/*Firefox*/

-webkit-animation:mymove5sinfinite;/*SafariandChrome*/

-o-animation:mymove5sinfinite;/*Opera*/

}

@keyframesmymove

{

0%{top:0px;}

25%{top:200px;}

75%{top:50px}

100%{top:100px;}

}

@-moz-keyframesmymove/*Firefox*/

{

0%{top:0px;}

25%{top:200px;}

75%{top:50px}

100%{top:100px;}

}

@-webkit-keyframesmymove/*SafariandChrome*/

{

0%{top:0px;}

25%{top:200px;}

75%{top:50px}

100%{top:100px;}

}

@-o-keyframesmymove/*Opera*/

{

0%{top:0px;}

25%{top:200px;}

75%{top:50px}

100%{top:100px;}

}

</style>

</head>

<body>

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

</body>

</html>

以上是“css中@keyframes有什么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

分享文章：css中@keyframes有什么用
本文路径：https://www.cdcxhl.com/article18/jgcgdp.html

成都网站建设公司_创新互联，为您提供移动网站建设、网站设计、静态网站、做网站、域名注册、企业建站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容