css动画使用
创建动画:
@keyframes 动画名 {
from {动画开始时的样式}
to {动画结束时的样式}
}
@keyframes 动画名 {
0% {动画开始时的样式}
25% {当动画进行到 25% 时的样式}
50% {当动画进行到 50% 时的样式}
100% {动画结束时的样式}
}
将动画绑定到目标元素身上:
/* 分离配置 */
div {
animation-name: myfirst; /* 动画名 */
animation-duration: 5s; /* 动画持续时间 */
animation-timing-function: linear; /* 动画的速度曲线。默认是 "ease" */
animation-delay: 2s; /* 动画延迟执行。默认是 0 */
animation-iteration-count: infinite; /* 规定动画被播放的次数。默认是 1 */
animation-direction: alternate; /* 规定动画是否在下一周期逆向地播放。默认是 "normal" */
animation-play-state: running;/* 规定动画是否正在运行或暂停。默认是 "running" */
}
/* 合并简写 */
div{
/* animation: 动画名 持续时间 速度曲线 动画延迟 播放次数 播放方式; */
animation: myfirst 5s linear 2s infinite alternate;
}
要想适配做的好哇!属性名前带-webkit-呀!具体怎么用哇!咱~~~~~