动画 · UI104班随堂笔记

## 动画 ### 1.渐变动画 `transition`动画可以控制HTML组件的某个属性发生改变时经历的时间，使其以平滑渐变的方式发生改变，产生动画效果。有4个参数。 * 第一个参数：指定对哪个HTML元素进行处理。 * 第二个参数：定义持续时间。 * 第三个参数：指定渐变的速度。（有多个可用的属性值，请完成自学） * 第四个参数：指定延迟时间。 ```html <style> div { width:100px; height:100px; background:red; transition:width 2s; } div:hover { width:300px; } </style> <body> <div></div> </body> ``` > 如果想设置多个属性的渐变动画，使用逗号分隔。 ~~~ transition: width,height 1s,1s ease,ease; ~~~ > 并不是所有的CSS属性都支持渐变动画。 [支持动画的CSS属性](https://www.cnblogs.com/yunkou/p/4235469.html) ### 2.Animation动画 `annimation`动画提供了更灵活的制作动画的方法。`animation`是一个符合属性，有5个参数： * 第一个参数：指定动画的名称。 * 第二个参数：指定动画的持续时间。 * 第三个参数：指定动画的变化速度。 * 第四个参数：指定动画延迟多久开始执行。 * 第五个参数：指定动画循环执行的次数。 ```html <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> <body> <div></div> </body> ```