网页编辑器
浏览器
@keyframes的基本语法：@keyframes animationname {keyframes-selector {css-styles;}}其中：animationname：动画名称keyframes-selector：动画时长的百分比css-styles： CSS 样式属性例子：css部分：.div1{ position: relative; width:100px; height:100px; background: darkslategray animation:myfirst 5s infinite; -webkit-animation:myfirst 5s infinite; -moz-animation:myfirst 5s infinite; -o-animation:myfirst 5s infinite; } @keyframes myfirst{ 0%{left:0px;} 100%{left:300px;} }html部分：
在一个动画中改变多个 CSS 样式例子：css部分：.div1{ position: relative; width:100px; height:100px; color:#fff; background: darkslategray; animation:myfirst 5s infinite; -webkit-animation:myfirst 5s infinite; -moz-animation:myfirst 5s infinite; -o-animation:myfirst 5s infinite; } @keyframes myfirst{ 0%{ left:0px; top: 0px; } 100%{ left:300px; top:400px; } }html部分：
带有多个 CSS 样式的多个 keyframe 选择器例子：css部分：.div1{ position: relative; width:200px; height:200px; color:#fff; background: darkslategray; animation:myfirst 5s infinite; -webkit-animation:myfirst 5s infinite; -moz-animation:myfirst 5s infinite; -o-animation:myfirst 5s infinite; } @keyframes myfirst{ 0%{ left:0px; top: 0px; background: darkslategray; } 25%{ left:100px; top:150px; background: rosybrown; } 50%{ left: 150px; top:300px; background: red; } 75%{ left:300px; top:400px; background: goldenrod; } 100%{ left:0px; top:0px; background:darkorchid; } }html部分：
keyframe兼容性代码具体如下： @keyframes myfirst { from {top:0px;} to {top:200px;} } @-moz-keyframes myfirst/* Firefox */ { from {top:0px;} to {top:200px;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } @-o-keyframes myfirst /* Opera */ { from {top:0px;} to {top:200px;} }
注意添加兼容性代码
希望小编分享的原创经验对好伙伴们有所帮助，如果小伙伴们有对本经验有任何疑问，请在下方评论处留言讨论，小编第一时间来解答！