一.过渡
transition-property
- 作用:定义哪个属性需要过渡。
- 结构:
transition-property: all;
- 常用值:
1.none:不过渡任何属性。
2.all:过渡所有能过渡的属性。
3.具体某个属性名,例如:width、heigth,若有多个以逗号分隔。
transition-duration
- 作用:设置过渡的持续时间。
- 结构:
transition-duration: 1s;
- 常用值:
1.0:没有任何过渡时间﹣﹣默认值。
2.s或ms:秒或毫秒。 3.列表: ■如果想让所有属性都持续一个时间,那就写一个值。 ■ 如果想让每个属性持续不同的时间那就写一个时间的列表。
举例:
.box1 {
width: 200px;
height: 200px;
background-color: orange;
opacity: 0.5;
/* 设置哪个属性需要过渡效果 */
transition-property: width,height,background-color;
/* 让所有能过渡的属性,都过渡 */
transition-property: all;
/* 分别设置时间 */
transition-duration: 1s,1s,1s;
/* 设置一个时间,所有人都用 */
transition-duration: 1s;
}
transition-delay
- 作用:指定开始过渡的延迟时间,
- 单位:s或ms
transition-timing-function
- 作用:设置过渡的类型
- 常用值:
1.ease:平滑过渡﹣- 默认值
2.linear:线性过渡
3.ease-in:慢一快
4.ease-out:快→慢
5.ease-in-out:慢→快一慢
6.step-start:等同于steps(1,start)
7.step-end:等同于 steps(1,end)
8.steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数默认值为end。
9.cubic-bezie (number,number, number, number):特定的贝塞尔曲线
transition 复合属性
- 如果设置了一个时间,表示 duration;如果设置了两个时间,第一是 duration,第二个是delay;其他值没有顺序要求。
transition:1s 1s linear all;
二.动画
- 结构:
/* 定义一个动画(定义一组关键帧)—— 第一种方式 */
@keyframes 动画名 {
/* 第一帧 */
from {
}
/* 最后一帧 */
to {
transform: translate(900px);
background-color: red;
}
}
/* 定义一个动画(定义一组关键帧)—— 第二种方式 */
@keyframes 动画名 {
/* 第一帧 */
0% {
}
/* 最后一帧 */
100% {
transform: translate(900px) rotate(360deg);
background-color: purple;
border-radius: 50%;
}
- 具体属性:
animation-name:给元素指定具体的动画(具体的关键帧)
animation-duration:设置动画所需时间
animation-delay:设置动画延迟
.inner {
/* 应用动画到元素 */
animation-name: 动画名;
/* 动画持续的时间 */
animation-duration: 3s;
/* 动画延迟时间 */
animation-delay: 0.2s;
}
- animation-timing-function:设置动画的类型。
常用值如下:
1.ease:平滑动画﹣﹣默认值
2.linear:线性过渡
3.ease-in:慢→快
4.ease-out:快→慢
5.ease-in-out:慢→快→慢
6.step-start:等同于 steps(1,start)
7.step-end:等同于 steps(1,end)
8.steps( integer,?): 接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数默认值为end。
9.cubic-bezie (number, number,number, number).
- animation-iteration-count:指定动画的播放次数,
常用值如下:
- number:动画循环次数
- infinite:无限循环
- animation-direction:指定动画方向
常用值如下:
- normal: 正常方向(默认)
- reverse:反方向运行
- alternate:动画先正常运行再反方向运行,并持续交替运行
- alternate-reverse:动画先反运行再正方向运行,并持续交替运行
- animation-fill-mode:设置动画之外的状态
- forwards:设置对象状态为动画结束时的状态
2.backwards:设置对象状态为动画开始时的状态
- animation-play-state:设置动画的播放状态,
常用值如下:
- running:运动(默认)
- paused:暂停
- 复合属性
只设置一个时间表示duration,设置两个时间分别是:duration和 delay,其他属性没有数量和顺序要求。
.inner { animation: atguigu 3s 0.5s linear 2 alternate-reverse forwards; }
备注: animation-play-state 一般单独使用。