css keyframes动画属性设置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css-keyframes</title> 6 <link href="style.css" rel="stylesheet" type="text/css"> 7 </head> 8 <body> 9 <div><span></span></div> 10 </body> 11 </html>
1 @-webkit-keyframes move{ /*定义名为move的动画函数 目前chrome对其支持较好 所以加-webkit-前缀*/ 2 0%{ /*时间达到0%时坐标位置为(0,0)*/ 3 transform:translate(0px,0px);/*应用该动画的标签位置为(0,0)*/ 4 } 5 20%{ 6 transform:translate(100px,80px); 7 } 8 50%{ 9 transform:translate(200px,0px); 10 } 11 100%{ 12 transform:translate(400px,80px); 13 } 14 } 15 div { 16 width: 300px; 17 height: 100px; 18 background: blue; 19 border:1px solid red; 20 margin: 20px 100px; 21 } 22 span{ 23 display:inline-block; 24 width:20px; 25 height:20px; 26 border-radius:10px; 27 background:yellow; 28 -webkit-animation-name:move;/*调用move动画*/ 29 -webkit-animation-duration:10s;/*move动画从0%到100%的用时,单位为s*/ 30 -webkit-animation-timing-function:ease;/*表示动画播放方式 ease(速度由快到慢)linear(恒定速度)ease-in(加速变化 31 32 ) ease-out(减速变化) ease-in-out(先加速在减速)*/ 33 -webkit-animation-direction:normal;/*表示动画播放方向 normal(默认从0%到100%) alternate(偶数次从0%到100%,基数 34 35 次100%到0%)*/ 36 -webkit-animation-delay:2s;/*动画延时2秒播放*/ 37 -webkit-animation-iteration-count:infinite;/*动画播放的次数 infinite表示无限次*/ 38 -webkit-animation-play-state:running;/*播放还是paused*/ 39 -webkit-animation-fill-mode:none;/*定义动画开始之前和结束之后发生的操作 none(动画结束时返回第一帧) forwards(动 40 41 画结束后显示最后一帧) backwards(元素应用动画样式时迅速应用动画的第一帧) both(元素动画同时具有forwards和 42 43 backwards效果)*/ 44 45 }
Do something useful!
标签:
前端
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试?测试工程师会被淘汰吗?