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>