animation快速入门

CSS

 <style>/* 关键帧 */@keyframes keyname{0%{transform: translate(0);}50%{/* 为了让方块走到尾部还能再回来可以先在在时间结束之前让方块走到末尾 */transform: translate(400px);}100%{transform: translate(0);}}div{width: 100px;height: 100px;background-color: cornflowerblue;animation: 1s keyname;/* 动画执行完毕所用的完整时间 */animation-duration: 5s;/* 动画延迟执行的时间 */animation-delay: 1s;/* 动画执行的方式 常用的值匀速linear */animation-timing-function: linear;/* 是否无限循环 常用值ifinite*/animation-iteration-count: infinite;/* 是否按照浏览器默认的顺序播放,还是倒着播放 */animation-direction: reverse;/* 播放一次的话,播放完要停在哪里或者播放完要设置什么状态,常用的值的forwards指的是执行完停在结束的位置,默认值是none不设定结束的位置或状态,如果是无限循环的动画执行,最后一次执行的状态设定是无效的 */animation-fill-mode: forwards;/* 设置播放状体啊 常用场景一个动画在执行的时候通过伪类比如hover 鼠标移入动画停止播放 常用的值是paused */animation-play-state: paused;/* 简写的两个规则:1>执行时间要在延迟时间之前2>animation必须写的两个值:关键帧名称以及执行时间*/}</style>

HTML

<body><div></div>
</body>

测试方块

在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部