CSS3過渡與動畫

transition

過渡（transition)是CSS3中具備顛覆性的特徵之一，咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下，當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

屬性	描述
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property	規定應用過渡的 CSS 屬性的名稱。
transition-duration	定義過渡效果花費的時間。默認是 0。單位是 秒 好比 0.5s
transition-timing-function	規定過渡效果的時間曲線。默認是 「ease」。
transition-delay	規定過渡效果什麼時候開始。默認是 0。立馬開始

若是想要全部的屬性都變化過渡， 寫一個all 就能夠

運動曲線示意圖：默認是 ease

div {
	width: 200px;
	height: 100px;
	background-color: pink;
	/* transition: 要過渡的屬性 花費時間 運動曲線 什麼時候開始; */
	transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
	/* transtion 過渡的意思 這句話寫到div裏面而不是 hover裏面 */	
}
div:hover {  /* 鼠標通過盒子，咱們的寬度變爲400 */
	width: 600px;
	height: 300px
}

transition: all 0.6s;  /* 全部屬性都變化用all 就能夠了 後面倆個屬性能夠省略 */
複製代碼

animation和@keyframes

/* Safari 和 Chrome */
@-webkit-keyframes mycolorchange 
{
    from {
        background: red;
    }
    to {
        background: yellow;
    }
}

// 在須要使用這段動畫的元素裏添加
-webkit-animation: mycolorchange 1s infinite;
複製代碼

@keyframes	規定動畫。
animation	全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name	規定 @keyframes 動畫的名稱。
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。默認是 0。
animation-timing-function	規定動畫的速度曲線。默認是 "ease"。
animation-delay	規定動畫什麼時候開始。默認是 0。
animation-iteration-count	規定動畫被播放的次數。默認是 1。
animation-direction	規定動畫是否在下一週期逆向地播放。默認是 "normal"。
animation-play-state	規定動畫是否正在運行或暫停。默認是 "running"。
animation-fill-mode	規定對象動畫時間以外的狀態。

設置播放延遲

.item{
  webkit-animation: revolving 4s 0s infinite;
  animation: revolving 4s 0s infinite;
}
@-webkit-keyframes revolving{
  0,75%{
    -webkit-transform: perspective(700px) rotateX(90deg);
  }
  87.5%{
    -webkit-transform: perspective(700px) rotateX(0deg);
  }
  100%{
    -webkit-transform: perspective(700px) rotateX(-90deg);
  }
}
複製代碼

把總動畫設爲4秒，而後前75%也就是3秒都沒變化（0-75%），以後的25%也就是1秒作動畫就能夠了