css的動畫和過渡
一、過渡：
transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。默認是 0。
transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
transition-delay 規定過渡效果何時開始。默認是 0。
eg：
div
{
transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s; }
二、動畫：
@keyframes 規則用於創建動畫。在 @keyframes 中規定某項 CSS 樣式，就能創建由當前樣式逐漸改為新樣式的動畫效果。
1、animation 所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
2、animation-name 規定 @keyframes 動畫的名稱。
3、animation-duration 規定動畫完成一個周期所花費的秒或毫秒。默認是 0。
4、animation-timing-function 規定動畫的速度曲線。默認是 "ease"。
5、animation-delay 規定動畫何時開始。默認是 0。
6、animation-iteration-count 規定動畫被播放的次數。默認是 1。
7、animation-direction 規定動畫是否在下一周期逆向地播放。默認是 "normal"。
8、animation-play-state 規定動畫是否正在運行或暫停。默認是 "running"。
9、animation-fill-mode 規定對象動畫時間之外的狀態。
eg：
div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation: myfirst 5s linear 2s infinite alternate; }
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。