css3動畫

整理自阮一峯的網絡日誌

 

1

2

3

4

5

6

 

a

心跳

c

d

e

f

g

h

A

B

.

 

 

  1 /*  IE 10和Firefox（>= 16）支持沒有前綴的animation，而chrome不支持，因此必須使用webkit前綴。  */
  2 
  3         .hov div{
  4             display: inline-block;
  5             color: #f33;
  6             text-align: center;
  7             font-size: 1.5em;
  8             width: 100px;
  9             height: 100px;
 10             background-color: #ccc;
 11         }
 12 
 13 
 14         /* ==========   transition  ============ */
 15         .hov div:hover {
 16             width: 200px;
 17             height: 200px;
 18             color: #3f3;
 19         }
 20 
 21         .anim2 {
 22             transition: 1s;     
 23             /*   加上之後樣式爲漸變式, 而不是馬上有效 */
 24         }
 25 
 26         .anim3 {
 27             transition: 1s width;
 28             /* 只對寬度應用動畫, 高度則當即變化. 因此transition: 1s height, 1s width; 等價與 transition: 1s */
 29         }
 30 
 31         .anim4 {
 32             transition: 1s width, 1s 1s height;     
 33             /*  在寬度動畫完成之後延遲1s再執行高度動畫  */
 34         }
 35 
 36         .anim5 {
 37             transition: 1s cubic-bezier(.83,.97,.05,1.44);
 38             
 39             /*
 40                 ease:默認, 逐漸放慢; linear:勻速; ease-in:加速;   ease-out:減速; cubic-bezier函數:自定義速度模式
 41             
 42                 ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)
 43                 linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)
 44                 ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)
 45                 ease-out: cubic-bezier(0, 0, 0.58, 1.0)
 46                 ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
 47                 
 48                 http://www.w3.org/TR/css3-transitions/#transition-timing-function_tag
 49             */
 50         }
 51 
 52         .anim6 {
 53             transition-property: height;
 54             transition-duration: 1s;
 55             transition-delay: 1s;
 56             transition-timing-function: ease;
 57             
 58             /*  等價於 transition: 1s 1s height ease;  */
 59         }
 60 
 61 
 62 
 63         /*  =======  animation    =============*/
 64 
 65         .auto div{
 66             display: inline-block;
 67             color: #f33;
 68             text-align: center;
 69             font-size: 1.5em;
 70             width: 100px;
 71             height: 100px;
 72             background-color: #ccc;
 73         }
 74 
 75         /* 能夠插入更多狀態, 10%,15%... */
 76         @keyframes gogogo {
 77             0%{transform:scale(0.8,0.8);}
 78             50%{transform:scale(1.2,1.2);}
 79             100%{transform:scale(0.8,0.8);}
 80         }
 81 
 82         @-moz-keyframes gogogo {
 83             0%{-moz-transform:scale(0.8,0.8);}
 84             50%{-moz-transform:scale(1.2,1.2);}
 85             100%{-moz-transform:scale(0.8,0.8);}
 86         }
 87 
 88         @-o-keyframes gogogo {
 89             0%{-o-transform:scale(0.8,0.8);}
 90             50%{-o-transform:scale(1.2,1.2);}
 91             100%{-o-transform:scale(0.8,0.8);}
 92         }
 93 
 94         @-webkit-keyframes gogogo {
 95             0%{-webkit-transform:scale(0.8,0.8);}
 96             50%{-webkit-transform:scale(1.2,1.2);}
 97             100%{-webkit-transform:scale(0.8,0.8);}
 98         }
 99 
100         .anm1:hover {   
101          -webkit-animation:gogogo 1s infinite linear;
102            -moz-animation:gogogo 1s infinite linear;
103             -ms-animation:gogogo 1s infinite linear;
104              -o-animation:gogogo 1s infinite linear;
105                 animation:gogogo 1s infinite linear;
106             
107             /*  infinite: 無限次播放, 也能夠指定具體播放次數, 如: 3  */
108         }
109 
110 
111         @-webkit-keyframes pound{
112             from { -webkit-transform: none; }
113           to { -webkit-transform: scale(0.7); }
114         }
115 
116         .anm2, .anm4{
117             border-radius:50%;
118             color:white !important;
119             background-color: #f33 !important;
120             
121             -webkit-animation:pound 0.6s infinite;
122         }
123 
124 
125         @-webkit-keyframes radius {
126             from{}
127             to{ border-radius: 50%;}
128         }
129         .anm3 {
130             -webkit-animation:radius 1s forwards;   
131             
132 
133             /*  動畫結束之後，默認會當即從結束狀態跳回到起始狀態
134                     forwards: 使得效果停留在結束狀態上
135                 none：默認值，回到動畫沒開始時的狀態
136                     backwards：讓動畫回到第一幀的狀態
137                     both: 根據animation-direction輪流應用forwards和backwards規則
138             */
139         }
140 
141 
142         .anm4{
143             -webkit-animation:pound 1s infinite alternate;
144             
145             
146             /*  默認動畫循環播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。
147                     animation-direction屬性，能夠改變這種行爲。
148             
149                     normal: 1-2-3(1)-2-3(1)-2-3
150                     alternate: 1-2-3-2-1-2-3
151                     reverse: 3-1-1(3)-2-1(3)-2-1
152                     alternate-reverse: 3-2-1-2-3-2-1
153             
154             最經常使用的值是normal和reverse, 瀏覽器對其餘值的支持狀況不佳
155             */
156         }
157 
158 
159         @-webkit-keyframes rainbow {
160             0%{background: #ccc}
161             100%{background: orange}
162 
163             /*keyframes寫法很自由,
164                 0% 能夠用 from 代替
165                 100% 能夠用 to 代替
166             
167                 from或to能夠不寫, 瀏覽器會自動推算
168             
169                 甚至能夠把多個狀態寫在一行
170                 from，to { transform: none; }
171                 50% { transform: scale(1.2); }
172             */
173         }
174         .anm5{
175             -webkit-animation-name: rainbow;
176           -webkit-animation-duration: 1s;
177           -webkit-animation-timing-function: linear;
178           -webkit-animation-delay: 3s;
179           -webkit-animation-fill-mode:forwards;
180           -webkit-animation-direction: normal;
181           -webkit-animation-iteration-count: 3;
182             
183             /*  等價於 -webkit-animation: 1s 3s rainbow linear 3 forwards normal;  */
184         }
185 
186 
187         .anm6{
188             -webkit-animation: 1s 3s rainbow 3 steps(4) forwards;
189             
190             /*  瀏覽器從一個狀態向另外一個狀態過渡，是平滑過渡。steps函數能夠實現分步過渡  */
191         }   
192 
193 
194         @-webkit-keyframes bg {
195             50% {background: orange}
196         }
197         .anm7{
198             -webkit-animation:pound 1s infinite alternate, bg 0.5s infinite alternate;
199             
200             /*  多個動畫疊加執行  */
201         }
202 
203 
204         .anm8{
205             -webkit-animation:gogogo 1s infinite alternate;
206             -webkit-animation-play-state: paused;
207         }
208         .anm8:hover{
209             -webkit-animation-play-state: running;
210             
211             /*  動畫播放過程當中動畫可能會忽然中止, 這時默認行爲是跳回到動畫的開始狀態, 如a元素,
212                     若是想讓動畫保持忽然終止時的狀態，就要使用animation-play-state屬性。如h元素
213             */
214         }
215 
216 
217 
218         /*==========   transform  ========== */
219         .trans div {
220             display: inline-block;
221             width: 100px;
222             height: 30px;
223             background: #ccc;
224             color: red;
225             text-align: center;
226         }
227 
228         .trs1 {
229             -webkit-transform: rotate(-30deg) skew(45deg) scale(0.8) translate(50px,-30px);
230         }
231 
232 
233         .trs2{
234                 -webkit-transition:all 1s ease-in-out;
235         }
236         .trs2:hover {
237             -webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);
238         }
239 
240 
241         @-webkit-keyframes spin{
242             to{-webkit-transform:rotate(360deg)}
243         }
244         .trs3 {
245             height: 100px !important;
246             font-size:3em;
247             line-height: 3%;
248             border-radius: 50%;
249             
250             -webkit-animation:spin 2s infinite linear;
251         }
252 
253 
254 
255         /*==============    loading demo    ================*/
256         .loading {
257             padding-left: 50px;
258         }
259         .loading div {
260             width: 30px;
261             height: 30px;
262             background: #ccc;
263             display: inline-block;
264             border-radius: 50%;
265         }
266 
267         @-webkit-keyframes loading {
268           0%, 80%, 100% { -webkit-transform: scale(0.0) }
269           40% { -webkit-transform: scale(1.0) }
270         }
271 
272         .ld1 {
273             -webkit-animation:loading 1.4s -0.32s infinite linear alternate;    
274         }
275         .ld2 {
276             -webkit-animation:loading 1.4s -0.16s infinite alternate;   
277         }
278         .ld3 {
279             -webkit-animation:loading 1.4s infinite alternate;
280         }