css3帧动画

在这里插入图片描述

前段时间我得到这张图，

我就在想这个不是做css3帧动画的素材吗？

想了就开始吧，

…

好吧我已经做完了

想要使用复制html css就能使用

总结：

属性	描述	CSS
	规定动画。	3
	所有动画属性的简写属性。	3
	规定 @keyframes 动画的名称。	3
	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
	规定动画的速度曲线。默认是 “ease”。	3
	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。	3
	规定动画何时开始。默认是 0。	3
	规定动画被播放的次数。默认是 1。	3
	规定动画是否在下一周期逆向地播放。默认是 “normal”。	3
	规定动画是否正在运行或暂停。默认是 “running”。	3

animation-timing-function 除了上面的几种常用方式之外，还有个一实用的函数，steps(number_of_steps, direction)，这个函数叫做阶梯函数，这个函数能够起到定格动画的效果。

阶梯函数不像其他定时函数那样，平滑的过渡，而是以帧的方式过渡。

他有两个参数：

direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；

将动画的总时长按照阶梯数等距划分

direction ：可选值为start或end，默认end，也可以不写；start表示动画的第一帧会被立即执行,直接从第二帧开始，然后以第一帧结束；end则表示动画从第一帧开始到正常结束；

上一篇：WebSocket Socket 聊天室

下一篇：js井子棋

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！