简述 transform，transition，animation 的作用
制作简单的动画，可以利用css3新增特性 transform，transition，animation 。
一、 transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
1. rotate：围绕中心点旋转 deg 单位
2. translate（x,y）:向 x y 轴移动位置 px
3. scale：整体缩放 倍数、scaleX scaleY 沿 轴方向缩放
4. skew(x,y) 切变、scaleX scaleY 沿轴切变
注意transform的层叠性，后面写的会覆盖前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
width: 300px;
height: 40px;
margin: 50px auto;
}
li {
float: left;
height: 40px;
list-style: none;
transition: 0.5s;
/* 开启 3D */
transform-style: preserve-3d;
/* 开启上帝视角，通过旋转(ps) */
/* transform: rotateX(-20deg) rotateY(30deg); */
}
a {
display: block;
width: 100px;
height: 40px;
text-decoration: none;
color: #fff;
text-align: center;
line-height: 40px;
}
li a:first-child {
background-color: green;
/* 往Z轴正方向移动20px */
transform: translateZ(20px);
}
li a:last-child {
background-color: orange;
/* 向上平移60px,往页面里面沿着X轴正方向旋转90deg */
transform: translateY(-60px) rotateX(90deg);
}
li:hover {
/* 沿着X轴负方向旋转90deg */
transform: rotateX(-90deg);
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">首页</a>
<a href="#">Index</a>
</li>
<li>
<a href="#">登录</a>
<a href="#">Login</a>
</li>
<li>
<a href="#">注册</a>
<a href="#">Register</a>
</li>
</ul>
</body>
</html>
transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程，想要元素有动画效果，需要transition提供过度效果。
二、transition
transition 属性设置元素当过渡效果。常配合hover使用，增强网页交互体验。
transition-property 指定要过渡的css属性（默认值为all）
transition-duration 指定完成过渡花费的时间（单位：s/ms）
transition-timing-function 指定速度效果的速度曲线（是匀速还是非匀速）
transition-delay 指定过渡效果何时开始（延迟多久后开始执行）
属性可以分开写,也可以放在一起写,放在一起写：
transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；
注：始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果
transition对于display 肯定是无效的；
transition对于visibility 也是无效的；
transition对background颜色是无效，颜色过渡是用background-image: linear-gradient(颜色1，颜色2);
transition对于opacity透明度是有效。
/*第一个值为方向，第二个值为时间*/
transition: width 1s; /*宽度变化为1s*/
/*所有的变化都是1s*/
transition： all 1s;
/*第三个参数为变化方式：*/
transition： width 1s liner; /*线性变换*/
/*第四个参数为延迟*/
transition： width 1s liner 3s;/*三秒的延迟*/
局限性
- transition需要事件触发，所以没法在网页加载时自动发生。
- transition是一次性的，不能重复发生，除非一再触发。
- transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
- 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
三、animation
缩写语法：animation:时长|过渡方式| 延迟|次数|方向|填充模式|是否暂停|动画名;
时长: 1s或者1000ms
过渡方式:跟transition取值一样，如linear
次数: 3或者2.4或者infinite
方向: reverse | alternate、alternate-reverse
填充模式: none | forwards | backwards | both
是否暂停: paused | running以上所有属性都有对应的单独属性
1.首先使用 @keyframes 来声明动画
/*先用@keyframes声明一个变量*/
@keyframes 动画名字{
/*声明过渡效果*/
from{
/*开始效果*/
}
to{
/*结束效果*/
}
/*或者定义中间多个过度效果*/
0%{
/*过度效果*/
}
33.3% 66.6%{
/*过度效果*/
}
100%{
/*过度效果*/
}
}
然后放在要加的动画元素上
/*之后再通过animation属性把定义的样式加上*/
div{
animation: 动画名字 1s(过度时间);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>animation复合属性</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: skyblue;
animation: move 2s linear alternate infinite;
/*
2.调用动画
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； linear 匀速播放
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
*/
}
/* 1.定义动画 */
@keyframes move {
to {
width: 500px;
height: 400px;
background-color: antiquewhite;
}
}
/* 暂停动画 */
.box:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
总结：2个状态之间用过渡transistion，多个状态之间用动画animation
\
