大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容介绍了“如何玩转css动画”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
创新互联建站是一家集网站建设,岱山企业网站建设,岱山品牌网站建设,网站定制,岱山网站建设报价,网络营销,网络优化,岱山网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
在 CSS 中,可以使用@keyframes来定义动画
(keyframes 表示“关键帧”)
大致结构:
@keyframes rotation { /* rotation 动画名 */ from { /* 起始状态 */ transform: rotate(0); } to { /* 结束状态 */ transform: rotate(360deg); }}
定义动画之后,可以使用 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: 正常播放动画
对于想要实现多种效果的动画,这个时候就可以使用多关键帧。
大致结构:
@keyframes changeColor { 0% { background-color: red; } 20% { background-color: orange; } 40% { background-color: blue; } 100% { background-color: green; }}
“如何玩转css动画”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!