怎么玩转css动画?(整理分享)

本篇文章给大家带来关于css中动画的相关知识,其中包括什么是动画,动画的调用以及多关键帧动画应该怎样实现,希望对你有帮助。

怎么玩转css动画?(整理分享)

1. 什么是动画

在 CSS 中,可以使用@keyframes来定义动画
(keyframes 表示“关键帧”)

大致结构:

@keyframes rotation { /* rotation 动画名 */    from {   /* 起始状态 */         transform: rotate(0);    }    to {    /* 结束状态 */         transform: rotate(360deg);    }}

登录后复制


2. 动画的调用

定义动画之后,可以使用 animation 属性调用动画。

立即学习“前端免费学习笔记(深入)”;

animation基本属性:

name: 动画的名字
(初始默认值 none)duration: 动画时长
(初始默认值 0s)timing function:变化速度曲线
(初始默认值 ease)delay: 延迟时间(动画经过多少时间才开始)
(初始默认值 0s)iteration-count: 动画执行次数
(初始默认值 1,如果想动画永远执行,写 infinite)

animation:  name | duration | timing function | delay | iteration-count;

登录后复制

除此之外,还有一些属性:

animation-direction(设置是否轮流反向播放动画)

normal: 以正常的方式播放动画(初始默认值)reverse: 以相反的方式播放动画alternate: 让动画的第 2、4、6…(偶数次)自动逆向执行alternate-reverse: 让动画的奇数次自动逆向执行

animation-fill-mode(设置当动画不播放时动画的状态)

none: 不改变动画的默认行为forwards: 让动画停止在最后结束状态backwards: 在 animation-delay 所指定的时间段内,应用动画第一个关键帧中的样式both: 同时遵循 forwards 和 backwards 的规则

animation-play-state(设置动画是播放还是暂停)

paused: 暂停动画的播放running: 正常播放动画


3.  多关键帧动画

对于想要实现多种效果的动画,这个时候就可以使用多关键帧。

大致结构:

@keyframes changeColor {0% {background-color: red;}20% {background-color: orange;}40% {background-color: blue;}100% {background-color: green;}}

登录后复制

(学习视频分享:css视频教程)

以上就是怎么玩转css动画?(整理分享)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2867892.html

(0)
上一篇 2025年3月10日 18:00:26
下一篇 2025年3月10日 18:00:38

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论