CSSDay11-动画
- 手机
- 2025-08-05 00:03:02
11.1 动画语法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; background-color: pink; /* 动画名 */ animation-name: yidong; /* 设置动画时间 */ animation-duration: 3s; /* 设置延迟时间 */ animation-delay: 0.2s; } @keyframes yidong { /* 第一种写法：from to */ /* from { background-color: red; } to { transform: translate(500px); background-color: skyblue; } */ /* 第二种写法：使用百分比进行设置 */ 0%{ background-color: green; } 40%{ background-color: red; transform: translateY(700px); } 80%{ background-color: yellow; transform: translate(200px,400px); } 100%{ background-color: pink; transform: translate(400px,500px); } } </style> </head> <body> <div></div> </body> </html>
设置动画的类型 animation-timing-function: linear; ease 默认值 平滑动画 linear 线性过渡 ease-in 从慢到快 ease-out 从快到慢 ease-in-out 慢 快 慢 steps 分步执行
设置动画的执行次数 animation-iteration-count: 1; 参数值可以是数字 infinite 无限次循环（常用）
动画执行的方式 animation-direction: alternate-reverse; normal 默认值 从from到to运行，每次都是这样 reverse 从to到from运行，每次都是这样 alternate 从from到to运行，重复执行时动画会反向执行 alternate-reverse 从to到from运行,重复执行时动画反向执行
动画填充模式 animation-fill-mode: backwards; none 默认值 动画执行完毕0，回到原来的位置 forwards 动画执行完毕时，会停留在动画结束的位置 backwards 动画执行完毕时，回到开始的位置
11.2 过渡过渡和动画类似，动画是页面一加载就直接执行的属性，过渡是必须有触发条件才会执行
.box { width: 100px; height: 100px; background-color: pink; /*opacity: 0;*/ /* 不透明度 */ /* 动画和过渡相似，动画是页面一加载就直接执行的属性，过渡是必须有触发条件才会执行 */ /* 第一步 设置哪个属性需要过渡效果 transition-property 设置需要过渡的属性，属性之间用逗号（,）隔开 all代表所有需要过渡的属性 */ /* transition-property: height, width, background-color, opacity; */ transition-property: all; /* 设置过渡时间 */ transition-duration: 1s; } .box:hover { height: 200px; width: 200px; background-color: orange; opacity: 1; }transition-timing-function 过渡的类型
ease默认值 平滑过渡
ease-in 先慢后快
ease-out 先快后慢
steps()分布执行过渡效果
可以设置一个第二个值
end，在时间结束时执行过渡（默认值）
start，在时间开始时执行过渡
CSSDay11-动画由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“CSSDay11-动画”
