1. 过渡(transition)
菜鸟教程：CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
transition： CSS属性名 持续时间 过渡效果(默认ease) 延迟时间(默认0)；
transition：transition-property transition-duration transition-timing-function transition-timing-function；
| 属性 | 描述
| transition | 简写属性，用于在一个属性中设置四个过渡属性。
| transition-property | 规定应用过渡的 CSS 属性的名称。
| transition-duration | 定义过渡效果花费的时间。默认是 0。
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。
// 鼠标滑过box，延迟0.2秒 宽度从50px过渡到100px
// css
.box {
width: 50px;
height: 50px;
background: red;
transition: width 1s ease .2s;
}
// html
.box:hover {
width: 100px;
}
transition-timing-function 规定过渡效果的时间曲线。
值 属性
linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
2. 动画(animation)
animation：动画名称(keyframe 名称)，花费时间，运动曲线(默认ease)，动画延迟(默认0)，播放次数(默认1)，是否反向播放动画(默认normal)，是否暂停动画(默认running)
| 值 | 描述 |
|
animation-fill-mode : none | forwards | backwards | both;
.box1 {
width: 150px;
height: 150px;
border-radius: 50%;
background: red;
margin: 100px auto;
animation: animation1 5s ease-in 1s;
animation-fill-mode: backwards;
}
@keyframes animation1 {
0% {
background: red;
opacity: 1;
}
50% {
background: yellow;
opacity: 0.5;
}
100% {
background: blue;
opacity: 0;
}
}
3. transform 转换
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform-origin: bottom right;
旋转rotate、 transform-origin: bottom right;
transform: rotate(45deg);
.box2 {
width: 200px;
height: 200px;
margin: 100px auto;
transform: rotate(45deg);
background: url('./kaipin.jpg') 0 0 repeat;
background-size: cover;
}
移动translate
transform: translate(100px,100px);
translateX() ： 通过给定一个X方向上的数目指定一个translation。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。
translateY() ：通过给定Y方向的数目指定一个translation。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。
缩放scale
transform: scale(0.6);
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放)；scaleX(x)元素仅水平方向缩放(X轴缩放)；scaleY(y)元素仅垂直方向缩放(Y轴缩放)
扭曲skew
transform: skew(20deg,30deg);
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形)；skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形)；skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)
矩阵matrix