过渡transition、2D 3D转换transform、动画

过渡transition

transition-property规定应用过渡的 CSS 属性的名称。

transition-duration定义过渡效果花费的时间。默认是 0。

transition-timing-function规定过渡效果的时间曲线。默认是 “ease”。

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
linear 规定以相同速度开始至结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果

transition-delay规定过渡效果何时开始。默认是 0。

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

<style>
.box {
  width: 100px;
  height: 50px;
  background: pink;
  transition: width 1s;
}
.box:hover {
  width: 200px;
}
</style>

<div class="box"></div>

transform

2D转换

1 translate( , )偏移方法
translate()根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

img{
   width: 200px;
   height: 200px;
   transition: all 1s;
}
.img1:hover{
   transform: translate(0,-10px);
}
<img class="img1" src="路径名" />

2 rotate()旋转方法
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

img{
   width: 200px;
   height: 200px;
   transition: all 1s;
}
.img1:hover{
   transform: rotate(360deg);
}
<img class="img1" src="路径名" />

3 scale( , )缩放方法
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

img{
   width: 200px;
   height: 200px;
   transition: all 1s;
}
.img1:hover{
   transform: scale(2);
}
<img class="img1" src="路径名" />

4 skew( , )扭曲方法
skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：

img{
   width: 200px;
   height: 200px;
   transition: all 1s;
}
.img1:hover{
   transform: skew(30deg,50deg);
}
<img class="img1" src="路径名" />

兼容写法
transform内可写多个转换

-webkit-transform: translate(50px, 100px) rotate(360deg)
-moz-transform: rotate(360deg)
-ms-transform: scale(2)
-o-transform: skew(30deg,50deg)

3D转换

transform-style规定变换的样式（父元素）
属性值：flag平面（默认） preserve-3d（保持3d变换）

.father{
	transform-style: preserve-3d;//声明后子元素才能设置3d效果
}
.father .son{
	transform: translateY(-25px) rotateX(90deg);
}

平移
整体写：transform:translate3d(x,y,z)

z:代表在垂直于平面的轴上移动，电脑屏幕往人眼那个方向为正方向。

单独写：transform:translateZ(z)

旋转
整体写：transform:rotate3d(x,y,z,角度) 角度单位deg

此时x、y、z取值为0或1，0不旋转，1旋转

单独写：transform:rotateX(角度) transform:rotateY(角度) transform:rotateZ(角度)

备注：左手定律，大拇指指向轴的正方向，手指弯曲的方向为旋转的正方向

tips:哪里设置变化效果就在哪里添加 transition
transform-style: preserve-3d; 同理，子元素设置后由父元素展示

动画

1. 自定义动画
   （1）通过@keyframes指定动画序列；
   （2）通过百分比将动画序列分割成多个节点；
   （3）在各节点中分别定义各属性
   （4）通过animation属性将动画应用于相应元素；
2. animation属性
   • animation-name动画名字(必须)
   • animation-duration动画播放时间（必须）
   • animation-timing-function 动画播放的形式
     属性值： linear线性 ease ease-in steps(n)
   • animation-delay 动画播放的延迟
   • animation-iteration-count 动画播放的次数 infinite无限次播放
   • animation-direction 动画是否轮流反向播放
     属性值:alternate交替播放 reverse反向播放 alternate-reverse 轮流反向

使用animation:1 2 3 4 5 6 ;

div{
    width: 200px;
    height: 200px;
    background: #58bc58;
    border-radius: 50%;
    background: url(../images/01.jpg) no-repeat;
    animation:dong 2s linear 2s infinite reverse;
}
@keyframes dong{
	0%{}
	100%{
	     transform:rotate(360deg);
	    }    
}      

<div></div>