1.transition

語(yǔ)法：

transition:width 3s ease 1s  

四個(gè)過(guò)渡屬性含義：

transition-property  ： 過(guò)度屬性的名稱
transition-duration ：  過(guò)渡效果持續(xù)時(shí)間
transition-timing-function： 速度曲線（linear、 ease、 ease-in、 ease-out 、ease-in-out）
transition-delay： 過(guò)渡效果何時(shí)開(kāi)始

舉例：

div
{
  width:100px;
  height:100px;
  background:blue;
  transition:width 2s;
}
div:hover
{
  width:300px;
}

觸發(fā)事件：當(dāng)你的width(過(guò)度屬性)發(fā)生變化的時(shí)候，執(zhí)行動(dòng)畫(huà)效果

2.transform

語(yǔ)法：

transform: none|transform-functions;

屬性：

transform:rotate(7deg); //旋轉(zhuǎn)
transform:translate(x,y) //移動(dòng)
transform:scale(x,y); //縮放
transform:skew(x-angle,y-angle); //傾斜

3.animation

語(yǔ)法：

animation:mymove 5s infinite;

六個(gè)動(dòng)畫(huà)屬性含義：

animation-name:   keyframe 名稱
animation-duration: 動(dòng)畫(huà)花費(fèi)時(shí)間
animation-timing-function: 速度曲線
animation-delay:  延遲時(shí)間
animation-iteration-count: 播放的次數(shù)
animation-direction: 是否輪流反向播放動(dòng)畫(huà)

例子：

div
{
   width:100px;
   height:100px;
   background:red;
   position:relative;
   animation:mymove 5s infinite;
}

@keyframes mymove
{
   from {left:0px;}
   to {left:200px;}
}