0%

css 动画

2D 属性

位移

1
2
3
4
5
6
7
8
transform: translate(XXpx,XX%,XXrem);
translateX(XXpx);
translateY(XXpx);
translateZ(XXpx);

/*一个值:x轴偏移量*/
/*两个值:x轴偏移量 y轴偏移量*/
/*三个值:x轴偏移量 y轴偏移量 z轴偏移量(z轴偏移量不能用 %)*/
  • 根据自身在标准流中的位置进行移动,移动后仍然占位,单位可以是 px 或 相对自身 %
  • 设置百分比会根据自身的宽和高计算,配合定位可实现元素页面居中
  • 水平正值向右,负值向左
  • 垂直正值向下,负值向上

旋转

1
2
3
4
5
6
7
8
9
transform: rotate(-180deg);     /*2D旋转*/
rotatex(-180deg); /*沿 x 轴3D旋转*/
rotatey(-180deg); /*沿 y 轴3D旋转*/
rotatez(-180deg); /*沿 z 轴3D旋转*/

transform-origin: top center XXpx;
/*一个值:x轴偏移量 (XXpx,XX%,center...)*/
/*两个值:x轴偏移量 y轴偏移量 (XXpx,XX%,center...)*/
/*三个值:x轴偏移量 y轴偏移量 z轴偏移量 (z轴偏移量只能用 XXpx)*/
  • 沿 z 轴,顺时针为正值,逆时针为负值
  • 沿 x 轴,从右侧看,顺时针为正值,逆时针为负值
  • 沿 y 轴,从下方看,顺时针为正值,逆时针为负值
  • 旋转和位移同时存在时,用空格隔开,先写位移后写旋转

缩放

1
2
transform: scale(XX, XX);
/*水平缩放系数 垂直缩放系数*/

斜切

1
2
transform: skew(XXdeg, XXdeg);
/*水平角度 垂直角度*/

背对屏幕不可见

1
backface-visibility: hidden;

3D 属性

开启 3D 空间

1
transform-style: preserve-3d;
  • 给需要使用 3D 显示效果元素的父元素设置次属性

景深透视效果

1
perspective: XXpx;
  • 设置该值后,子元素会出现近大远小的效果
  • 最佳效果取值范围为 800px ~ 1500px

过渡

  • 过渡使元素样式改变时,有一个中间过程(至少有过渡的属性和过渡时间才能出现动画效果)

复合属性

1
transition: 属性 时间 类型 延迟;  /*多组值逗号隔开*/
  • 复合属相的参数顺序没有特定要求,但延迟必须在过渡时间之后,通常过渡的属性写开头
  • 过渡添加的位置根据具体场景确定(添加至元素本身或者 hover 状态下)

过渡的属性

1
2
3
transition-property: all;
none;
width/height/background-color/left/opacity...

持续时间

1
transition-duration: 2s;    /*单位秒或毫秒*/

动画类型

1
2
3
4
5
transition-timing-function: linear;        /*线性过渡,cubic-bezier(0.0, 0.0, 1.0, 1.0) */
ease; /*平滑过渡,cubic-bezier(0.25, 0.1, 0.25, 1.0) */
ease-in; /*由慢到快,cubic-bezier(0.42, 0, 1.0, 1.0) */
ease-out; /*由快到慢,cubic-bezier(0, 0, 0.58, 1.0) */
ease-in-out; /*由慢到快再到慢,cubic-bezier(0.42, 0, 0.58, 1.0) */

贝塞尔曲线可视化:https://cubic-bezier.com/

延迟时间

1
transition-delay:  1s;    /*单位秒或毫秒*/

动画属性

复合属性

1
2
amimation: NAME TIME METHOD DELAY REPLAY DIRECTION;
/*名称 时间 方式 延时 次数 方向*/

关键帧区间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@keyframes NAME{
from{

}
to{

}
}
@keyframes NAME{
%0{

}
50%{

}
100%{

}
}

动画外属性

1
2
3
animation-fill-mode: both;     /*开始前位于 from 位置,结束后停留在 to 位置*/
backwards; /*开始之前位于 from 位置*/
forwards; /*结束之后停留 to 位置*/
  • 定义动画开始之前和结束之后的位置

动画名称

1
animation-name: NAME;

动画持续时间

1
animation-duratioin: XXs;
  • 单位可以是秒或毫秒

动画过渡方式

1
2
3
4
5
6
7
animation-timing-function:  step(NUMBER);
linear; /*匀速*/
ease; /*平滑过渡*/
ease-in /*由慢到快*/
ease-out /*由快到慢*/
ease-in-out /*由慢到快再到慢*/
cubic-bezier(n,n,n,n) /*cubic-bezier 函数*/

动画状态

1
2
animatioin-play-state: running;  /*执行动画效果*/
paused; /*暂停*/

动画延时

1
animation-delay: XXs;

动画循环次数

1
animation-iteration-count: infinite;

动画方向

1
2
3
4
animation-direction: normal;               /*正常*/
reverse; /*反向*/
alternate; /*有来有去*/
alternate-reverse; /*反向有来有去*/