【CSS之过渡及动画】

---

一、CSS过渡

CSS过渡，就是样式发生变化时，可以看上去更自然，更柔和。想让哪个盒子有过渡样式，就把transition属性加在那个盒子上。

1.常用的属性

transition-property：应用过渡效果的CSS 属性名 CSS属性都可以(all, width, color …)
transition-duration：过渡效果持续时间 秒和毫秒都可以, 1s 1000ms …
transition-timing-function ：过渡效果展示方式 linear(匀速), ease(开始慢、中间快、结束慢)
transition-delay：过渡效果延迟时间
transition 按照前四个属性的顺序分别设值 按照前四个属性的顺序分别设值，

二、CSS动画

1.动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发动画可以自动触发动态效果
2.设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤

1.常用的属性

1 animation-name:指定要对当前元素生效的关键帧的名字

2 animation-duration:指定动画的执行时间

3 animation-timing-function:跟transition-timing-function用法一样

4 animation-iteration-count:指定动画执行的次数 animation-iteration-count:infinite;（无限执行）

5.animation-direction:指定动画运行的方向
normal 默认值 从from向to运行 每次都是这样
reverse 从 to 向 from 运行 每次都是这样
alternate 从 from 向 to 运行 重复执行动画时反向执行
alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行

8.animation-delay:设置动画的延时

8.transition:可以同时设置动画相关的所有属性,只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟