@-webkit-keyframes 动画 css3
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
当在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
例子:
当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
1 div 2 { 3 animation: myfirst 5s; /*IE*/ 4 -moz-animation: myfirst 5s; /* Firefox */ 5 -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ 6 -o-animation: myfirst 5s; /* Opera */ 7 } 8 9 10 @keyframes myfirst /*IE*/ 11 { 12 0% {background: red;} 13 25% {background: yellow;} 14 50% {background: blue;} 15 100% {background: green;} 16 } 17 18 @-moz-keyframes myfirst /* Firefox */ 19 { 20 0% {background: red;} 21 25% {background: yellow;} 22 50% {background: blue;} 23 100% {background: green;} 24 } 25 26 @-webkit-keyframes myfirst /* Safari 和 Chrome */ 27 { 28 0% {background: red;} 29 25% {background: yellow;} 30 50% {background: blue;} 31 100% {background: green;} 32 } 33 34 @-o-keyframes myfirst /* Opera */ 35 { 36 0% {background: red;} 37 25% {background: yellow;} 38 50% {background: blue;} 39 100% {background: green;} 40 } 41 42 //改变背景色和位置: 43 @keyframes myfirst 44 { 45 0% {background: red; left:0px; top:0px;} 46 25% {background: yellow; left:200px; top:0px;} 47 50% {background: blue; left:200px; top:200px;} 48 75% {background: green; left:0px; top:200px;} 49 100% {background: red; left:0px; top:0px;} 50 } 51 52 @-moz-keyframes myfirst /* Firefox */ 53 { 54 0% {background: red; left:0px; top:0px;} 55 25% {background: yellow; left:200px; top:0px;} 56 50% {background: blue; left:200px; top:200px;} 57 75% {background: green; left:0px; top:200px;} 58 100% {background: red; left:0px; top:0px;} 59 } 60 61 @-webkit-keyframes myfirst /* Safari 和 Chrome */ 62 { 63 0% {background: red; left:0px; top:0px;} 64 25% {background: yellow; left:200px; top:0px;} 65 50% {background: blue; left:200px; top:200px;} 66 75% {background: green; left:0px; top:200px;} 67 100% {background: red; left:0px; top:0px;} 68 } 69 70 @-o-keyframes myfirst /* Opera */ 71 { 72 0% {background: red; left:0px; top:0px;} 73 25% {background: yellow; left:200px; top:0px;} 74 50% {background: blue; left:200px; top:200px;} 75 75% {background: green; left:0px; top:200px;} 76 100% {background: red; left:0px; top:0px;} 77 }
下面的表格列出了 @keyframes 规则和所有动画属性:
运行名为 myfirst 的动画,其中设置了所有动画属性:
1 div { 2 animation-name: myfirst; 3 animation-duration: 5s; 4 animation-timing-function: linear; 5 animation-delay: 2s; 6 animation-iteration-count: infinite; 7 animation-direction: alternate; 8 animation-play-state: running; 9 /* Firefox: */ 10 -moz-animation-name: myfirst; 11 -moz-animation-duration: 5s; 12 -moz-animation-timing-function: linear; 13 -moz-animation-delay: 2s; 14 -moz-animation-iteration-count: infinite; 15 -moz-animation-direction: alternate; 16 -moz-animation-play-state: running; 17 /* Safari 和 Chrome: */ 18 -webkit-animation-name: myfirst; 19 -webkit-animation-duration: 5s; 20 -webkit-animation-timing-function: linear; 21 -webkit-animation-delay: 2s; 22 -webkit-animation-iteration-count: infinite; 23 -webkit-animation-direction: alternate; 24 -webkit-animation-play-state: running; 25 /* Opera: */ 26 -o-animation-name: myfirst; 27 -o-animation-duration: 5s; 28 -o-animation-timing-function: linear; 29 -o-animation-delay: 2s; 30 -o-animation-iteration-count: infinite; 31 -o-animation-direction: alternate; 32 -o-animation-play-state: running; 33 }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤