css3动画

  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         }