6.动画
# 6.动画
- 1. transition 过渡
transition-property:all;//监听属性
transition-duration:1s;//过渡时间
transition-timing-function:linear;//运动速率
transition-delay:1s;//过渡延迟时间
```html
<style>
div{
width:100px;
height:100px;
background-color:#008c8c;
transition:width 2s linear 1s;
}
div:hover{
width:200px;
height:200px;
}
</style>
<div></div>
```
transition-timing-function:cubic-bezier(x1, y1, x2, y2);//x值必须（0，1）
- 2. animation
animation-name//名称
animation-duration//执行时间
animation-timing-function//运动速率
animation-delay//延迟时间
animation-iteration-count:infinite;//执行无限次，默认值为1
animation-direction:reverse;//反向运动，默认值normal
animation-play-state:paused;//不推荐使用
animation-fill-mode:none | forwards | backwards | both;//forwards:在动画运动结束后，保持动画最后一帧的状态;backwards:在动画运动开始前，保持动画第一帧的状态;both:在动画结束胡，保持动画最后一帧的状态, 在动画开始前，保持动画第一帧的状态;
```html
<style>
@keyframes run{
0%{
left:0;
top:0;
}
25%{
left:100px;
top:0;
}
50%{
left:0;
top:100px;
}
75%{
left:0;
top:0;
}
100%{
left:0;
top:0;
}
}
div{
position:absolute;
width:100px;
height:100px;
background-color:red;
animation:run 4s;
}
</style>
```
- 3. step
steps(1, end); === step-end;
steps(1, start); === step-start;
```html
<style>
@keyframes change-color{
0% {
background-color:red;
}
25% {
background-color:green;
}
50% {
background-color:blue;
}
75% {
background-color:black;
}
100% {
background-color:#fff;
}
}
div{
width:100px;
height:100px;
background-color:red;
animation:change-color 4s steps(1, end);/*steps(几步执行，)
start:保留下一帧状态，直到这段动画时间结束
end:保留当前帧状态，直到这段动画时间结束
*/
}
</style>
```
- 4. transform
rotate:
transform:rotate(0deg);//旋转度数
taransform-origin:0 0;//旋转中心点
transform:rotateX(0deg);//围绕X轴旋转
transform:rotateY(0deg);//围绕Y轴旋转
transform:rotateZ(0deg);//围绕Z轴旋转
transform:rotate3d(x,y,z,angle);//围绕自定义矢量旋转
scale: 伸缩的是此元素的变化坐标轴的刻度（若x为2，则原来x轴的100被拉伸为200的长度，但是现在100的刻度代表200的长度。就像皮筋一样上面标上刻度100，被拉长了2倍，但是皮筋上的刻度未变，但现在100刻度代表了200的长度一样。所以再对x轴进行长度操作如平移100刻度，实际上平移了200的长度）
scale(x, y);//x.横坐标伸缩的倍数;y.纵坐标伸缩的倍数;
scalex();
scaley();
scalez();
scale3d();
可以叠加操作
transform:scale(.5, .5) scale(3, 3);//实际操作倍数0.5*3
skew: 倾斜
transform:skew(xdeg, ydeg)
不仅倾斜了，坐标轴刻度也被拉伸了，因为倾斜过后，元素高度保持不变
倾斜的是坐标轴而不是元素本身，若设置了xdeg那么y轴角度变化，若设置了ydeg那么x轴角度发生变化。
xdeg:表示x轴扭曲度
x扭曲 = y旋转+y伸缩
x取值为正，x轴不动，y轴朝着x轴正方向倾斜x度数
x取值为负，x轴不动，y轴朝着x轴负方向倾斜x度数
ydeg:表示x轴扭曲度
y扭曲 = x旋转+x伸缩
y取值为正，y轴不动，x轴朝着y轴正方向倾斜x度数
y取值为负，y轴不动，x轴朝着y轴负方向倾斜y度数
translate:平移
transform:translate(xpx,ypx);//平移xpx和ypx
transform:translatex(xpx);
transform:translatey(ypx);
transform:translatez(zpx);
元素居中，不知道元素的宽度：
left:50%;
transform:translatex(-50%);
用于父元素的属性
perspective:景深(按照投影理解，比较好理解)
取值1到正无穷px，默认值为0
perspective-origin: 300px 200px;//从元素左上角开始计算
用于自身元素的属性
transform:perspective(800px);
用于父元素属性
transform-style:preserve-3d;//渲染3d效果
用于自身元素的属性：
backface-visibility：visible | hidden;//背面元素是否可见
```html
<!-- 3D旋转图片墙 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
:root,
body{
height:100%;
}
body{
perspective:2000px;
transform-style:preserve-3d;
}
@keyframes run{
0%{
transform:translate(-50%, -50%) rotatey(0deg);
}
100%{
transform:translate(-50%, -50%) rotatey(360deg);
}
}
.wrapper{
position: absolute;
left:calc(50%);
top:calc(50%);
transform:translate(-50%, -50%);
width:300px;
height:300px;
transform-style:preserve-3d;
animation:run 10s infinite;
}
.image{
position:absolute;
background-color:#fff;
width:300px;
height:300px;
}
.image:nth-of-type(1){
transform:rotatey(45deg) translateZ(800px);
background-image:url(1.jpg);
}
.image:nth-of-type(2){
transform:rotatey(90deg) translateZ(800px);
background-image:url(2.jpg);
}
.image:nth-of-type(3){
transform:rotatey(135deg) translateZ(800px);
background-image:url(3.jpg);
}
.image:nth-of-type(4){
transform:rotatey(180deg) translateZ(800px);
background-image:url(4.jpg);
}
.image:nth-of-type(5){
transform:rotatey(225deg) translateZ(800px);
background-image:url(5.jpg);
}
.image:nth-of-type(6){
transform:rotatey(270deg) translateZ(800px);
background-image:url(6.jpg);
}
.image:nth-of-type(7){
transform:rotatey(315deg) translateZ(800px);
background-image:url(7.jpg);
}
.image:nth-of-type(8){
transform:rotatey(360deg) translateZ(800px);
background-image:url(8.jpg);
}
</style>
</head>
<body>
<div class="wrapper">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
<script>
document.body.onmousemove = function(e){
this.style.perspectiveOrigin = "" + e.pageX + "px " + e.pageY + "px";
}
</script>
</body>
</html>
```
以上是markdown格式的笔记
