css动画(简单css3动画)

前端这点事 60 0

CSS中animation属性大家都很常见,而@keyframes大家有听说过吗?animation属性里引用@keyframes有一种简写方式,展开来一共有8个子属性,通过它们,我们可以控制各种的动画过程。

子属性

animation-name: 指定一个 @keyframes 的名称,动画将要使用这个@keyframes定义。

animation-duration: 整个动画需要的时长。

animation-timing-function: 动画进行中的时速控制,比如 ease或 linear

animation-timing-delay: 动画延迟时间

animation-direction: 动画重复执行时运动的方向

animation-iteration-count: 动画循环执行次数

animation-fill-mode: 设置动画执行完成后/开始执行前的状态,比如,你可以让动画执行完成后停留在最后一幕,或恢复到初始状态。

animation-play-state: 暂停/启动动画。

接下来给大家展示下:

HTML:

<div class="element"></div>

CSS:

css动画

显示效果:

css动画

css动画

大家可以尝试自己做下,非常炫酷哦!了解以上的属性,再也不用担心动画效果了。

标签: CSS

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~