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 }
复制代码

 

posted @   李辉健  阅读(3441)  评论(0)  编辑  收藏  举报
编辑推荐：
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
SQL AI 助手