【CSS基础】10.过度动画transition和动画animation

1. transition过度动画

1.1 介绍

CSS trnasition提供了一种在更改CSS属性时控制动画速度的方法。
可以让CSS的属性变化称为一个秩序一段时间的过程，而不是默认的立即生效
比如在基础9中我们学到的trnaslate可以让一个元素移动，但瞬间就完成了
我们可以利用trnasition让这个完成的过程有一定的动画效果
属性可以控制的内容
- 哪些属性需要进度过度动画
- 何时开始，可以延时触发，比如2s后再进行动画
- 持续多久（duration）动画的持续时间
- 定义动画（匀速、先快后慢、先慢后快）timing

1.2 哪些CSS属性可以做动画？

可以通过MDN查询
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
月度CSS属性的文档说明

1.3 过渡动画 transition 的属性值

transition-propety:指定过度属性的名称，比如width、left
- all:所有属性都执行动画
- none：所有属性都不执行动画
transition-duration:动画的持续时间
- 单位可以说秒s或者是毫秒ms
trnasition-timing-function:指定动画的变化曲线
- 通过这里查询
  - https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
transition-delay:指定延时时间
- 秒s
transition:是整个动画的简写
- 顺序：过度属性持续时间变化曲线延时时间
- transition-propety transition-duration transition-timming-function transition-delay

.box:hover {transform: skew(10deg);transition-property: transform;transition-duration: 2s;transition-timing-function: ease-in;transition-delay: 1s;
}

2. animation 动画

前面我们学习了trnasition来进行过度动画，但过渡动画有如下缺点

transition只能定义开始和结束状态，不能定义中间的过程
transition不能重复执行
transition需要在特定的状态下执行，比如某个元素修改了

那么animation就是更为复杂的动画，可以解决以上问题

2.1 animation介绍

animation的定义
- 使用keyframes定义动画过程
- 配置动画的名称持续时间动画曲线延时时间执行次数方向

2.2 @keyframes规则

使用@keyframes来定义整个动画的状态变化
- 定义动画发生的事件点，比如0% 20% 100%等
- 0%表示动画发生的第一时刻，100%表示动画的最终时刻
- 开始和结束还有两个特殊的别名，from和to

比如，我们要将一个盒子先向下平移，再向右，最后向上

@keyframes translateAnimation {0% {transform: translate(0, 0);}33% {transform: translate(0, 100px);}66% {transform: translate(200px, 100px);}100% {transform: translate(200px, 0px);}
}

2.3 animation的属性

animation-name:指定定义的动画，也就是@keyframes定义的动画名称
animation-duration:动画的持续时间
animation-timming-function:动画曲线
animation-delay:动画延时时间
animation-iteration-count:动画执行的次数，infinite表示无限循环
animation-direction：指定方向
- normal表示正序
- reverse返序
animation-fill-mode:执行动画保留哪个值
- none: 回到没有执行动画的位置
- forwards:动画最后一帧的位置
- backwards:动画第一帧的位置
animation-play-state:指定动画的暂停和运行（用JS控制）

2.4 animation的属性简写

顺序动画名称动画持续时间动画曲线动画延时时间动画执行次数动画方向动画最后停留的帧动画执行状态
- animation-name animation-duration animation-timming-function animation-delay animation-iterration-count animation-direction animation-fill-mode animation-play-state

举例

<!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>.box {width: 100px;height: 100px;background-color: pink;animation: translateAnimation 2s ease 1s 2 normal forwards;}@keyframes translateAnimation {0% {transform: translate(0, 0);}33% {transform: translate(0, 100px);}66% {transform: translate(200px, 100px);}100% {transform: translate(200px, 0px);}}</style></head><body><div class="box"></div></body>
</html>