transition：平滑过渡（补间动画）
-
自动完成从起始状态到终止状态的的过渡
- 不管中间的状态
-
transition-property: width / all
2D 转换 transform
-
缩放：scale
- transform: scale(2, 0.5)
-
位移：translate
- transform: translate(水平位移, 垂直位移)
-
旋转：rotate
- transform: rotate(角度)
3D 转换 transform
-
旋转：rotateX、rotateY、rotateZ
-
transform: rotateX(360deg); //绕 X 轴旋转360度
-
transform: rotateY(360deg); //绕 Y 轴旋转360度
-
transform: rotateZ(360deg); //绕 Z 轴旋转360度
-
最好加透视：perspective: 110px
-
/* 透视 :加给变换的父盒子*/
-
/* 设置的是用户的眼睛距离 平面的距离*/
-
/* 透视效果只是视觉上的呈现，并不是真正的3d*/
-
-
-
移动：translateX、translateY、translateZ
-
透视：perspective
-
作为一个属性，设置给父元素，作用于所有3D转换的子元素
-
作为 transform 属性的一个值，作用于元素自身
-
-
3D呈现（transform-style）
-
transform-style: preserve-3d; //让 子盒子 位于三维空间里
-
transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化）
-
动画：animation
-
可通过设置多个节点 来精确控制一个或一组动画，常用来实现复杂的动画效果
-
定义动画的步骤
旋转
- {transform:rotate(7deg);
- -webkit-transform:rotate(7deg)
- /* Safari 和 Chrome */
淡入淡出
/* fades in upon hover */
.fadeIn {
opacity: 0;
}
.fadeIn:hover {
opacity: 1;
}
/* basic fadein */
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
opacity: 1;
}
动画性能优化
设置不允许复制文本
- user-select:none
