animation: 动画名称 花费的时间 运动的曲线(动画的运动速度)
何时开始(是否有延迟) 播放次数 播放完后是否相反(默认是从正向);
注意第6个参数。默认是永远正向播放。
alternate 是第一次正向播放,第二次反向播放。
alternate-reverse 是第一次反向播放,第二次正向播放
-webkit-animation: move 1.6s linear 0s infinite;是为了兼容谷歌。safira浏览器哈。
通过前缀来兼容哈。
效果:div从left=0的位置,跑到left=400,颜色从pink变成red,动画执行无数次。运动速度匀速:
<style> .demo { text-align: center; line-height: 40px; width: 100px; height: 40px; background: pink; position: absolute; left: 0; /* 定义动画的规制 linear匀速运动*/ animation: move 1.6s linear 0s infinite; //动画名称move 动画执行的时间是1.6s 匀速(linear) 0s(不延迟) infinite(动画执行无数次) } //调用动画 @keyframes move { from { left: 0; background: pink; } to { left: 400px; background: red; } } </style>
<div class="demo"> 我是动画 </div>