【浅识css动画】👩‍🦲->👳‍♀️->👳‍♂️->💀

114 阅读1分钟

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;
}

传送门:深入浅出 CSS 动画

要想适配做的好哇!属性名前带-webkit-呀!具体怎么用哇!咱~~~~~

动画库

传送门:27 个前端动画库让你的交互更加炫酷