transform 变形
transform变形。用来移动、比例缩放、旋转。
<div class="father">
<div class="son"></div>
</div>
1. translate(x,y) 平移
-
translateX(50px/50%) 往右
-
translateY(50px) 往下
-
translateZ(50px) 高度增加 且要设置父容器perspective
.father { perspective:1000px; /*距离视口中心点1000px; */ }
垂直居中：绝对定位+translate(-50%,-50%)
.father {
width:300px;
height:300px;
position:relative; /*父相 */
}
.son {
position:absolute; /*子绝 */
width:100px;
height:100px;
top:50%;
left:50%;
transform:translate(-50%,-50%); /*50%往上往左移动自身宽度的一半 */
}
鼠标放上去，查看其移动前位置：
.son:hover {
transform:translate(50px,50px) ; /* 指定横纵坐标平移 */
}
2. scale(x,y) 缩放
.son:hover {
transform:scaleX(1.5); /* 沿x轴放大1.5倍 */
}
3. rotate( ) 旋转
.son:hover {
transform:rotate(360deg); /*自身旋转 360度 */
}
transition 过渡
.son {
height:100px;
width:100px;
}
.son:hover {
height: 200px;
width: 200px;
}
.son {
transition: all 1s; /* 所有动画持续1s */
/* transition: 1s height; 仅为height属性添加动画 */
/* transition: 1s ease; 速度：默认逐渐放慢 linear匀速 ease-in加速 ease-out减速 */
}
合写为：
transition: 1s 1s height ease;
单独定义为：
transition-property: height; /*对象参与过渡的属性 */
transition-duration: 1s; /* 过渡的持续时间 */
transition-delay: 1s; /* 延迟过渡的时间 */
transition-timing-function: ease; /* 延迟过渡的效果 */
注意：
- 有一些属性不能设置transition：如
display:block;到none，找不到规律，可以改成visibility：hidden实现同样效果。 - transition需要明确知道，开始状态和结束状态的具体数值，比如background颜色可以过渡 从#ffffff 到 #000000；opacity透明度可以过渡 从0-1。
display、visibility、opacity区别：
display:none;，此元素将不在占据空间，也就相当于把这个元素从html页面中删除掉了，不响应绑定事件。visibility:hidden隐藏元素，这个元素仍占据空间，不响应绑定事件。opacity:0;透明度为0，元素仍占据空间，仍响应绑定事件。
animation 动画
动画的原理
帧是一幅幅静止的画面，每秒30帧就是每秒播放30张静止的画面，不同的帧快速的闪过，使人眼误以为是动态的，这就形成了动画。
制作动画需要两步：
- 创建关键帧keyframes
- 设置播放动画的参数
@keyframes 创建动画
用 关键帧@keyframes 定义 xxx 效果的有三个状态，分别为起始（0%）、中点（50%）和结束（100%），也可以插入更多状态。
.son:hover {
animation: 1s xxx; /* 动画名xxx 一个周期持续1s */
}
@keyframes xxx { /* 用keyframs定义xxx效果 */
0% {
background: #c00;
}
50% {
background: orange;
}
100% {
background: yellowgreen;
}
}
加入infinite关键字，可以让动画无限次播放：
.son:hover {
animation: 1s xxx infinite; /* 循环播放 */
animation: 1s xxx 3; /* 播放3次 */
animation: 1s xxx forwards; /* 停留在结束状态 */
}
合写为：
son:hover {
animation: 1s 1s xxx linear 3 forwards normal;
}
单独定义为：
.son:hover {
animation-name: xxx;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
三者区别
- transform是非动态的，直接呈现变换后的样式。
- transition是过渡动画，可以指定状态变化需要的时间，需要触发⼀个事件（鼠标移动上去，点击等）才执行动画，只能设定开始状态和结束状态，且是一次性的。
- animation是功能强大的动画，设定后自动执行，不需要事件去触发，可以设定任何时刻的动画状态，且可以循环。
