ugrás a tartalomhoz

Archívum - Május 17, 2014

CSS3 animation több transform különböző időben

toldigabor · 2014. Május. 17. (Szo), 13.21
Van egy négyzet, amely úgy animálódik, hogy egyszerre meg is nő és forog is. Azt szeretném, hogy a két animáció szétváljon időben: először csak megnőjön (scale), majd elforduljon (rotate).
  1. <!doctype html>  
  2. <html lang="hu">  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <meta name="description" content="">  
  6.     <meta name="keywords" content="">  
  7.       
  8.     <style>  
  9.         .box1{  
  10.             width:200px;  
  11.             height:200px;  
  12.             background:rgba(255,0,0,0.5);  
  13.             position:absolute;  
  14.             top:100px;  
  15.             left:50%;  
  16.             margin-left:-100px;  
  17.         }  
  18.           
  19.         .box2{  
  20.             width:200px;  
  21.             height:200px;  
  22.             background:rgba(0,0,255,0.5);  
  23.             position:absolute;  
  24.             top:100px;  
  25.             left:90%;  
  26.             margin-left:-100px;  
  27.         }  
  28.           
  29.         @-webkit-keyframes movingbox{  
  30.             from{-webkit-transform: scale(1,1); -webkit-transform: rotate(0deg);}  
  31.             to{-webkit-transform: scale(1.6,1.6); -webkit-transform: rotate(360deg);}  
  32.         }  
  33.           
  34.         .box2{  
  35.             -webkit-animation:movingbox 5s infinite;  
  36.         }  
  37.     </style>  
  38.       
  39.     <title>CSS3 Animáció</title>  
  40. </head>  
  41.   
  42. <body>  
  43.     <div class="box1"></div>  
  44.     <div class="box2"></div>  
  45. </body>  
  46. </html>  
Hogyan kell? Előre is köszi.
 ■

Buzzword-free Bounded Contexts

inf · 2014. Május. 17. (Szo), 12.00
Miért hasalnak el az átlag szoftverek már a tervezés szakaszában
 ■