@keyframes关键帧animation:
首先需要定义一套关键帧,关键帧的定义方式比较特殊,它使用了关键字@keyframes来定义动画。这里可以用from{}to{}或者用百分比充当时间点。具体格式为: 然后,在需要设置动画的相应的标签里,调用动画就可以了 比如需要给div添加动画效果: div{animation:1s 2s 动画名称 运动方式 动画执行的次数 } 解释: 第一个值:运动的总时间 第二个值:延迟的动画时间,单位是秒或者毫秒 第三个值:动画名称 第四个值:运动方式 第五个值:动画执行的次数 animation是所有动画属性的简写,除了animation-play-state属性 注意:为了达到最佳的浏览器兼容效果,在实际书写代码的时候,还必须加上各大浏览器的私有前缀最后,依次解释一下动画的各个属性 /*动画名称*/ -webkit-animation-name: run;
/*动画时长*/ 默认:0; animation-duration: 1s;
/*动画速度曲线*/ animation-timing-function: linear; linear 匀速 ease 先慢后快,默认 ease-in 慢速开始 ease-out 慢速结束 ease-in-out 开始和结束都慢 cubic-bezier 贝塞尔曲线 推荐工具:
/*动画延迟几秒之后执行,可以为负数*/ animation-delay: 0s;
/*动画的次数*/ 可以具体的数值,也可以说是无限次 infinite infinite无限执行 animation-iteration-count: infinite;
/*动画是否在下一周期逆向的播放*/ nomal正常的,默认 reverse反向的、 alternate单数正向,偶数反向、 alternate-reverse单数反向,偶数正向 animation-direction: alternate;
/*动画开始之前或者结束之后所在的位置*/ forwards动画在结束之后停留在to的位置(最后一帧) backwards动画在延迟期间会停留在from的位置(第一帧) both以上两种情况都有 nomal默认没有 animation-fill-mode: forwards;
/*动画的播放状态*/(写在hover里面是为了不让其影响平时的状态) paused暂停 running运行,默认 animation-play-state:paused;
如果觉得《@keyframes关键帧动画(animation)》对你有帮助,请点赞、收藏,并留下你的观点哦!