本文将为大家详细介绍“css中@keyframes规则的使用方法”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“css中@keyframes规则的使用方法”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。
css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。
@keyframes是CSS的一种规则，可以用于定义CSS动画的一个周期的行为；需要和animation属性一起使用，创建简单的动画效果。请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
css @keyframes规则怎么用？
通过 @keyframes 规则，能够创建动画。
语法
@keyframes animationname {keyframes-selector {css-styles;}}animationname：必需的。定义animation的名称。
keyframes-selector：必需的。动画持续时间的百分比。
合法值：
● 0-100%
● from (和0%相同)
● to (和100%相同)
css-styles必需的。一个或多个合法的CSS样式属性
说明：
创建动画的原理是：将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
css @keyframes属性 示例
<!DOCTYPE html><html><head><meta charset="utf-8"> <style> div{width:100px;height:100px;background:red;position:relative;animation:mymove 5s infinite;-webkit-animation:mymove 5s infinite; /* Safari and Chrome */}@keyframes mymove{0% {top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75% {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}@-webkit-keyframes mymove /* Safari and Chrome */{0% {top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75% {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}}</style></head><body><p><strong>注意:</strong>@keyframes不兼容IE 9 and 以及更早版本的浏览器.</p><div></div></body></html>如果你能读到这里，小编希望你对“css中@keyframes规则的使用方法”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
