transition
设置元素当过渡效果
复合属性：transition: property duration timing-function delay;
-
transition-property: 参与过渡的属性——默认 all 所有
-
transition-duration:过渡持续时间 s秒 ms毫秒 1s=1000毫秒
-
transition-delay:过渡延迟的时间 s秒 ms毫秒 1s=1000毫秒
-
transition-timing-function: 时间函数（过渡的动画类型） linear 匀速 ease-in加速 ease-out减速 ease 缓动 ease-in-out 先加速后减速
transform 2D
translate(x,y); 位移
两个值：水平 垂直方向位移
一个值： 水平(x)
-
translateX( ) 水平方向，X轴
-
translateY( ) 垂直方向，Y轴
rotate() 角度
角度 deg
正值 ：顺时针旋转
负值：逆时针旋转
scale(x,y) 2d缩放
参数：缩放比率 大于1 放大 0-1之间 缩小
两个值：水平 垂直方向缩放
一个值： x,y轴方向同时缩放
scaleX( ) X轴
scaleY( ) Y轴
.wrap:nth-child(2):hover .box {
transform: scale(2); /*X,Y轴一起缩放*/
}
skew(x,y)2d倾斜
两个值：水平和垂直方向倾斜
一个值： 水平(x)
-
skewX( ) 水平方向
-
skewY( ) 垂直方向
.wrap:nth-child(2):hover .box {
transform: skew(30deg); /*X,Y 一起变形*/
}
transform 3D
transform-style
flat 让嵌套子元素以2d平面展示
preserve-3d 让嵌套子元素以3d空间展示
.wrap {
position: relative;
margin: 100px auto;
width: 400px;
height: 300px;
background: red;
transform: rotateY(85deg);
transform-style: preserve-3d; /* preserve-3d 让嵌套子元素以3d空间展示*/
}
.box {
font-size: 28px;
width: 150px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -100px;
transform: rotateX(30deg);
}
<div class="wrap">
<div class="box">ABCDEFG</div>
</div>
rotateX 沿X轴进行旋转,preserve-3d效果下
rotateY 沿Y轴进行旋转，preserve-3d效果下
perspective: 视距
让3D变换的子元素拥有透视效果(近大远小)
加给父元素
只对3d变换的元素有效
值越小透视效果越明显
无穷大时接近于none
通常:500px-800px
translateZ() 沿z轴平移
Z轴是垂直于屏幕的轴
正值：向前（越近）
负值：向后 （越远）
综合案例：
.wrap {
float: left;
width: 200px;
height: 300px;
border: 1px solid red;
margin: 100px 0 0 100px;
perspective:500px;
}
.wrap img {
transition: 0.5s;
}
.wrap:nth-child(1):hover img {
transform: translateZ(100px);
}
.wrap:nth-child(2):hover img {
transform: translateZ(-100px);
}
<div class="wrap">
<img src="pic02.jpg"/>
</div>
<div class="wrap">
<img src="pic02.jpg"/>
</div>
rotateX() 沿X轴旋转
正值：向上
负值：向下
rotateY() 沿y轴旋转
正值：向右
负值：向左
rotateZ() 沿z轴旋转
垂直屏幕的轴
综合案例：
.wrap {
float: left;
width: 200px;
height: 300px;
border: 1px solid red;
margin: 100px 0 0 100px;
perspective: 500px;
}
.wrap img {
transition: 0.5s;
}
.wrap:nth-child(1):hover img {
transform: rotateX(30deg);
}
.wrap:nth-child(2):hover img {
transform: rotateX(-30deg);
}
.wrap:nth-child(3):hover img {
transform: rotateY(30deg);
}
.wrap:nth-child(4):hover img {
transform: rotateY(-30deg);
}
.wrap:nth-child(5):hover img {
transform: rotateZ(30deg);
}
.wrap:nth-child(6):hover img {
transform: rotateZ(-30deg);
}
<div class="wrap">
<img src="pic02.jpg" />
</div>
...
animation
需要与@keyframes搭配使用
语法：animation: animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode
-
animation-name: @keyframes名字定义
-
animation-duration: 动画持续的时间
-
animation-timing-function 时间函数
-
animation-delay 动画延迟时间
-
animation-iteration-count 定义动画在结束前运行的次数 可以是1次 无限循环(infinite).
-
animation-direction 动画是否反向播放
normal 每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始，这是默认属性。 alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向，比如，ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代 reverse 反向运行动画，每周期结束动画由尾到头运行。 alternate-reverse 反向交替， 反向开始交替 动画第一次运行时是反向的，然后下一次是正向，后面依次循环。决定奇数次或偶数次的计数从1开始。 -
animation-fill-mode 设置CSS动画在执行之前和之后如何将样式应用于其目标。
animation-fill-mode: none; animation-fill-mode: forwards; 停留最后一帧 animation-fill-mode: backwards; animation-fill-mode: both;
animate.css的使用
引入：
Install with npm:
$ npm install animate.css --save
with yarn:
$ yarn add animate.css
or add it directly to your webpage using a CDN:
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
/>
</head>
4.1版本用法：
<h1 class="animate__animated animate__bounce">An animated element</h1>
3.8版本用法
<div class="animated rollIn">文本内容</div>
