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"。
- | transition-timing-function | 规定过渡效果何时开始。默认是 0。
// 鼠标滑过box，延迟0.2秒 宽度从50px过渡到100px
// css
.box {
width: 50px;
height: 50px;
background: red;
transition: width 1s ease .2s;
}
// html
.box:hover {
width: 100px;
}
<div class="box"></div>
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-name | 规定需要绑定到选择器的 keyframe 名称。。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。 |
| animation-delay | 规定在动画开始之前的延迟。 |
| animation-iteration-count | 规定动画应该播放的次数。 |
| animation-direction | 规定是否应该轮流反向播放动画。 |
animation-fill-mode : none | forwards | backwards | both;
/*none：不改变默认行为。
forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
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;
}
}
<div class="box1"></div>
3. transform 转换
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform-origin: bottom right;/* 设置旋转点，默认是中心点 */
- 旋转rotate、 transform-origin: bottom right;/* 设置旋转点，默认是中心点 */
transform: rotate(45deg);
<div class="box2"> </div>
.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
