1. transition
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property 【规定设置过渡效果的 CSS 属性的名称。（以秒或毫秒计）】
- transition-duration 【规定完成过渡效果需要多少秒或毫秒。】
- transition-timing-function【规定速度效果的速度曲线。】
- transition-delay 【定义过渡效果何时开始。值以秒或毫秒计】
1.1 transition-property
transition-property是用来指定当元素其中一个属性改变时执行transition效果。
none: 没有属性会获得过渡效果；
all: 所有属性都将获得过渡效果,也是其默认值；
property: 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-property: none || all || property;
1.2 transition-duration
规定完成过渡效果需要多少秒或毫秒。默认值是 0，意味着不会有效果。
transition-duration: time;
1.3 transition-timing-function
规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。
transition-timing-function: linear || ease || ease-in || ease-out || ease-in-out || cubic-
bezier(n,n,n,n);
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
1.4 transition-delay
属性规定过渡效果何时开始。默认值为0，也就是立即开始
transition-delay: time;
1.5 注意
transform适用于：所有块级元素及某些内联元素
1.6 例子
<div class="box"></div>
.box {
width: 100px;
height: 100px;
margin: 200px auto;
background-color: #cd4a48;
transition: all 2s;
}
.box:hover {
width: 300px;
height: 300px;
}
2. transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜
transform: none || transform-functions
- none 定义不进行转换
- transform-functions 表示一个或多个变换函数，以空格分开 主要的transform-function变换函数如下：
2.1 translate 移动
| 值 | 描述 |
|---|---|
| translate(x,y) | 定义 2D 转换 |
| translate3d(x,y,z) | 定义 3D 转换 |
| translateX(x) | 定义转换，只是用 X 轴的值 |
| translateY(y) | 定义转换，只是用 Y 轴的值 |
| translateZ(z) | 定义 3D 转换，只是用 Z 轴的值 |
2.2 scale 缩放
| 值 | 描述 |
|---|---|
| scale(x,y) | 定义 2D 缩放转换 |
| scale3d(x,y,z) | 定义 3D 缩放转换 |
| scaleX(x) | 通过设置 X 轴的值来定义缩放转换 |
| scaleY(y) | 通过设置 Y 轴的值来定义缩放转换 |
| scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换 |
2.3 rotate 旋转
| 值 | 描述 |
|---|---|
| rotate(angle) | 定义 2D 旋转，在参数中规定角度 |
| rotate3d(x,y,z,angle) | 定义 3D 旋转 |
| rotateX(angle) | 定义沿着 X 轴的 3D 旋转 |
| rotateY(angle) | 定义沿着 Y 轴的 3D 旋转 |
| rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转 |
2.4 skew 倾斜
| 值 | 描述 |
|---|---|
| skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换 |
| skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换 |
| skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换 |
2.5 perspective
| 值 | 描述 |
|---|---|
| perspective(n) | 为 3D 转换元素定义透视视图 |
2.6 transform-origin
- 以上变化的默认参照点是元素的中心点，不过可以通过
transform-origin设置元素的参照点。 - 其中X，Y，Z对应三维坐标，X，Y，Z的值可以是em，px。此外，X，Y可以是百分值，其中X也可以是字符参数值left，center，right。Y和X一样除了百分值外还可以设置字符值top，center，bottom
transform-origin: X || Y || Z
3. animation
animation属性里引用 keyframes 有一种简写方式，展开来一共有8个子属性，通过它们，我们可以控制各种的动画过程
animation: name duration timing-function delay iteration-count direction;
// Vue 提供了 `transition` 的封装组件，可以给元素和组件添加进入/离开过渡
<transition name="fade">
<p v-show="isShow">
hello
</p>
</transition>
// SCSS部分
.fade-enter-active {
animation: run .5s;
}
.fade-leave-active {
animation: run .5s reverse;
}
@keyframes run {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
animation-name: 指定一个@keyframes的名称，动画将要使用这个@keyframes定义。animation-duration: 整个动画需要的时长。animation-timing-function: 动画进行中的时速控制，比如ease或linear.animation-delay: 动画延迟时间。animation-direction: 动画重复执行时运动的方向。animation-iteration-count: 动画循环执行的次数。animation-fill-mode: 设置动画执行完成后/开始执行前的状态，比如，你可以让动画执行完成后停留在最后一幕，或恢复到初始状态。animation-play-state: 暂停/启动动画。 // 注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。
