css3动画不断变化
作者：互联网
2026-03-28
HTML教程
我正在尝试实现 css3动画…. 我计划在周期中不断改变我的动画效果 但问题是在一个循环后它停止在红色,它不会进一步改变它的颜色…. 如何继续循环……
http://jsfiddle.net/9CZFS/
在下面提供我的代码
div{width:100px;height:100px;background:red;animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-animation:myfirst 5s; /* Opera */}@keyframes myfirst{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:green;}}@-moz-keyframes myfirst /* Firefox */{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:green;}}@-webkit-keyframes myfirst /* Safari and Chrome */{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:green;}}@-o-keyframes myfirst /* Opera */{0% {background:red;}25% {background:yellow;}50% {background:blue;}100% {background:green;}} 见： http://jsfiddle.net/9CZFS/1/ animation:myfirst 5s linear infinite; ----^-----
您需要指定动画将永远循环.
此外,如果您希望动画流畅,则需要以相同的值开头和结尾：
0%,100% {background:red;}25% {background:yellow;}50% {background:blue;}75% {background:green;}
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
WebSocket 连接池生产级实现：实时行情高可用与负载均衡
04/18
使用 Python 合并与拆分 Excel 单元格的实用方法
04/18
Pandas数据清洗完整指南：8大核心技巧详解
04/17
NumPy+Pandas数据分析基础完全指南
04/17
AI Agent 接入 Zvec (一)：MCP 篇
04/17
python 更新Obsidian
04/17
用Manim实现动态交点计算--从一个动点问题说起
04/17
用 AI 解决数据库性能问题的方法论
04/17
前端害怕被蒸馏 快速入门Python 【demo_03】
04/17
Python 操作 Word 文档节与页面设置
04/16
AI精选
