CSS3動畫第二式 組合動畫

接第一式之後的高階招式，加入一些組合動畫，劇情、動畫啥的都是隨意瞎想的，純粹是為了熟悉2d、3d和過渡等css3**寫法。效果見下圖：

**如下（有點長，摺疊一下）：

doctype html

>
<
html 
lang
="zh-cn"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>test
title
>
<
style
>
ul,ol,li 
.box 
.talkbox 
.talkbox ul 
.talkbox ul li
.ufobox 
.talkbox01 
.talkbox01 ul 
.talkbox01 ul li
.ufobox .ufotop 
.ufobox .ufobody 
@-webkit-keyframes talk01
15% 
30% 
45% 
60%,85% 
95% 
100% 
}        @keyframes talk01
15% 
30% 
45% 
60% 
90%, 95% 
100% 
}        @-webkit-keyframes gogogo
30%50%
70%100%
}        @keyframes gogogo
30%50%
70%100%
}        .box02 
.box02 .hill 
.carbox 
.carbox .carbody 
.carbody .cardoorbox 
.carbody .cardoor 
.carbox .carwheel 
.carbox .front 
.carbox .back 
.talkbox02 
.talkbox02 ul 
.talkbox02 ul li 
.talkbox03 
.talkbox03 ul li 
.talkbox03 ul li:first-child 
.talkbox03 ul li:last-child 
@-webkit-keyframes talk02 
5%, 25% 
30%, 50% 
55%, 75% 
80%,100% 
}        @keyframes talk02 
5%, 25% 
30%, 50% 
55%, 75% 
80%,100% 
}        @-webkit-keyframes talk03 
30%,70% 
100% 
}        @keyframes talk03 
30%,70% 
100% 
}        @-webkit-keyframes boxgo 
30% 
40% 
45% 
52% 
60% 
70% 
78% 
82% 
100% 
}        @keyframes boxgo 
30% 
40% 
45% 
52% 
60% 
70% 
78% 
82% 
100% 
}        @-webkit-keyframes wheelgo 
100% 
}        @keyframes wheelgo 
100% 
}        @-webkit-keyframes doorgo 
80% 
100% 
}        @keyframes doorgo 
80% 
100% 
}    
style
>
head
>
<
body
>
<
div 
class
="box"
>
<
div 
class
="talkbox talkbox01"
>
<
ul>
<
li>馬：看見下面那輛車了嗎？
li>
<
li>黃：看見了，老大。
li>
<
li>馬：等會飛過去，撞他！
li>
<
li>黃：遵命，老大!
li>
<
li>黃.馬：go！
li>
ul>
div>
<
div 
class
="ufobox"
>
<
div 
class
="ufotop"
>
div>
<
div 
class
="ufobody"
>灰機
div>
div>
div>
<
div 
class
="box02"
>
<
div 
class
="hill"
>
div>
<
div 
class
="talkbox talkbox02"
>
<
ul>
<
li>董：今天我們學習如何飛躍鳳凰山哈！
li>
<
li>陳：嗯好噠！
li>
<
li>陳.董：油門飈起來~~~
li>
ul>
div>
<
div 
class
="talkbox talkbox03"
>
<
ul>
<
li>董：啊！！！雅蠛蝶~~~
li>
<
li>陳：救命！救命！
li>
ul>
div>
<
div 
class
="carbox"
>
<
div 
class
="carbody"
>
<
div 
class
="cardoorbox"
><
span 
class
="cardoor"
>
span
>
div>
div>
<
span 
class
="carwheel front"
>+
span
>
<
span 
class
="carwheel back"
>+
span
>
div>
div>
body
>
html
>

只支援主流瀏覽器哈，讓低版本ie見鬼去吧~~~

css3動畫和js動畫

css3動畫 animation 是個簡寫屬性，用於設定六個動畫屬性。注意必須規定animation duration屬性，否則時長為0 animation timing function規定動畫速度曲線 alternate 動畫應該輪流反向 transtion 過度屬性 預設 all 0 ease...

CSS 3動畫介紹

原文 a beginner s introduction to css animation 譯文 乙個初學者對css動畫的介紹 譯者 dwqs 在這篇文章，我將向你介紹css動畫，隨著瀏覽器對動畫支援的改善，一種高效率的做事方式變得越來越流行。考慮到基礎知識，我將快速建立乙個從正方形變成圓形的動畫案...

CSS3動畫 過渡

css3過渡是元素從一種樣式轉換成另一種樣式。使用transition屬性 transition property 過渡的名稱 transition duration 過渡效果花費的時間 transition timing function 過渡效果的時間曲線 transition delay 過渡...