CSS3 之 [过渡]、[2D转换]、[3D转换]、[动画]

一、CSS3 之过渡（transition）

过渡是元素从一种样式变为另一种样式时的效果，谁变化给谁加
1，语法

transition：要过渡的属性 花费时间 运动曲线 何时开始;
transition：width 0.5s ease 1s;
transition：all .5s;

• 属性：宽、高、内外边距、背景颜色等，全部过渡就是all
• 花费时间：单位是秒，必须写单位
• 运动曲线：可省略，默认是ease逐渐慢下来，ease-in加速，ease-out减速，liner匀速，ease-in-out先加速后减速
• 何时开始：单位是秒，默认是0，可省略

二、CSS3 之转换（transform）

转换就是元素的位移(translate)、旋转(rotate)、缩放(scale)等

1. CSS3 之 [2D转换]

1.1位移(translate)语法

transform：translate(x,y)
transform：translateX(n)
transform：translateY(n)

位移的应用—让盒子实现水平和垂直居中

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform：translate(-50%, -50%);
}

1.2旋转(rotate)语法

transform: rotate(度数);
transform: rotate(45deg);
trandform-origin: 50% 50%;   //旋转的默认中心点
trandform-origin: left bottom;  //左下角为中心
trandform-origin: 50px 100px;  //元素位置为中心

1.3缩放(scale)语法

transform：scale(x,y);
// x,y代表倍数，小于1就是缩小，大于1是放大
// 优点是以中心点向四周缩放，不影响其他盒子

1.4 2D转换综合写法

transform：translate(50px, 50px) rotate(180deg) scale(1.2);
//位移放最前面

2. CSS3 之 [3D转换]

translate3d(x,y,z)
rotateX(x)
rotateY(y)
rotateZ(z)

三、CSS3 之动画（animation）

动画相对于过渡，可以实现更多变化、控制、连续播放等效果，可达到一打开界面元素就自动变化。
制作动画分两步：
1.先定义动画

@keyframes 动画名称 {
  0% {}
  100% {}
}

2.再调用动画

//简写形式，不包括animation-play-state
animation：动画名称 持续时间 速度曲线 何时开始 播放次数 是否逆向播放 起始或结束状态;
animation：first 5s liner 2s infinite alternate;
animation：first 5s infinite;

div {
  animation-name: 动画名称；
  animation-duration：持续时间；
  animation-timing-function：速度曲线，默认是ease；
  animation-delay：何时开始；
  animation-iteration-count：播放次数，默认是1，还有infinite；
  animation-direction：是否有逆向播放，默认是normal，还有alternate；
  animation-play-state：running还有paused；（经常和鼠标经过搭配使用）
  animation-fill-mode：结束后状态，forwards还有backwards；
}