详细内容:https://www.cnblogs.com/qianguyihao/p/8435182.html
-
过渡:transition
-
2D 转换 transform
-
3D 转换 transform
-
动画:animation
过渡:transition
一般用来过渡,没有时间轴得概念,只触发一次,没有中间件状态
transition 包括以下属性:
-
transition-property: all; 如果希望所有的属性都发生过渡,就使用all。
-
transition-duration: 1s; 过渡的持续时间。
-
transition-timing-function: linear; 运动曲线。属性值可以是:
linear 线性 ease 减速 ease-in 加速 ease-out 减速 ease-in-out 先加速后减速
-
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
综合属性:
transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
transition: all 3s linear 0s;
2D 转换 3D
四大特征:旋转 位移 变形 缩放
2D
-
缩放:scale
格式:transform: scale(x, y); transform: scale(2, 0.5); 参数解释: x:表示水平方向的缩放倍数。y:表示垂直方向的缩放倍数 取值:大于1表示放大,小于1表示缩小。不能为百分比。
-
位移:translate
格式:transform: translate(水平位移, 垂直位移); transform: translate(-50%, -50%); 参数解释: 参数为百分比,相对于自身移动。 正值:向右和向下。 负值:向左和向上。如果只写一个值,则表示水平移动。
-
旋转:rotate
格式:transform: rotate(角度); transform: rotate(45deg); 参数解释: 正值 顺时针;负值:逆时针。
transform-origin属性:默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点
transform-origin: 水平坐标 垂直坐标;
transform-origin: 50px 50px;
transform-origin: center bottom; //旋转时,以盒子底部的中心为坐标原点
案例:扑克牌
3D
1. 旋转:rotateX、rotateY、rotateZ
旋转的方向:左手握住旋转轴,竖起拇指指向旋转轴的正方向,正向就是其余手指卷曲的方向
格式:
transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度
2. 移动:translateX、translateY、translateZ
格式:
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
3. 透视:perspective
格式有两种写法:
-
作为一个属性,设置给父元素,作用于所有3D转换的子元素
-
作为 transform 属性的一个值,做用于元素自身。
4. 3D呈现(transform-style)
3D元素构建是指某个图形是由多个元素构成的,可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。属性值可以如下:
transform-style: preserve-3d; //让 子盒子 位于三维空间里
transform-style: flat; //让子盒子位于此元素所在的平面内(子盒子被扁平化)
动画 animation
1、定义动画的步骤
(1)通过@keyframes定义动画;
(2)将这段动画通过百分比,分割成多个节点;然后各节点中分别定义各属性;
(3)在指定元素里,通过 animation 属性调用动画。
在 js 中定义一个函数的时候,是先定义,再调用:
js 定义函数:
function fun(){ 函数体 }
调用:
fun();
在 CSS3 中定义动画的时候,也是先定义,再调用:
定义动画:
@keyframes 动画名{
from{ 初始状态 }
to{ 结束状态 }
}
调用:
animation: 动画名称 持续时间;
animation属性的格式如下:
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次)
animation: move1 1s alternate linear 3;
animation: move2 4s;
(1)动画名称:
animation-name: move;
(2)执行一次动画的持续时间:
animation-duration: 4s;
(3)动画的执行次数:
animation-iteration-count: 1; //iteration的含义表示迭代
属性值infinite表示无数次。
(3)动画的方向:
animation-direction: alternate;
属性值:normal 正常,alternate 反向。
(4)动画延迟执行:
animation-delay: 1s;
(5)设置动画结束时,盒子的状态:
animation-fill-mode: forwards;
属性值: forwards:保持动画结束后的状态(默认), backwards:动画结束后回到最初的状态。
(6)运动曲线:
animation-timing-function: ease-in;
属性值可以是:linear ease-in-out steps()等。
注意,如果把属性值写成steps(),则表示动画不是连续执行,而是间断地分成几步执行。我们接下来专门讲一下属性值 steps()。
steps()的效果
animation: move2 4s steps(2);