<style>
div{
width: 100px;
height: 100px;
background-color: red;
animation: myfirst 5s linear infinite;
}
</style>
animation-name:myfirst; <-- 加载动画时间 -->
animation-duration:1s; <-- 动画加载时间 -->
animation-timing-function:linear; <-- 动画的播放速度为均速 -->
animation-iteration-count:infinte; <-- 播放次数 ,循环播放 -->
animation-delay:2s; <-- 延迟–>
<-- animation: 动画名 完成时间 运行速度 播放次数 -->
<-- animation: myfirst 5s linear infinite; -->
/*语法@keyframes 动画名字 */
@keyframes myfirst{
from{
background-color: red;
}
to{
background-color: green;
}
}
/*每个浏览器对动画兼容性都不同,为了保证兼容性,应定义多个版本的动画*/
@-moz-keyframes myfirst{/*针对火狐浏览器*/
from{/*开始动画状态*/
background-color: red;
}
to{/*结束动画状态*/
background-color: green;
}
}
@-webkit-keyframes myfirst{/*谷歌和苹果*/
from{
background-color: red;
}
to{
background-color: green;
}
}