Espansione cerchi con animazioni CSS3

Question

che sto cercando di fare in modo, quando la pagina viene caricata cerchi appaiono che va bene, ma ho bisogno di loro di crescere verso l'esterno, in modo da piccolo al grande dal centro, non dall'alto a sinistra:

Si può vedere quello che ho attualmente qui: http://thomasbritton.co.uk/projects/ BERS /

Idealmente, voglio che questo sia fatto in CSS, ma può utilizzare JS se è più facile / più stabile.

Tutte le idee?

Ecco il mio css anche per la parte di animazione:

.circle a {
  border-radius: 150px;
  color: #fff;
  height: 0;
  position: absolute;
  text-decoration: none;
  width: 0;
}

.circle a.grow {
  -webkit-animation-name: grow;
  -webkit-animation-duration: 2.2s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: grow;
  -moz-animation-duration: 2.2s;
  -moz-animation-timing-function: ease;
  -moz-animation-iteration-count: 1;    
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;

  animation-name: grow;
  animation-duration: 2.2s;
  animation-timing-function: ease;
  animation-iteration-count: 1; 
  animation-direction: normal;
  animation-delay: 0;
  animation-play-state: running;
  animation-fill-mode: forwards;
}

@-webkit-keyframes grow {
  0% { -moz-transform: scale(0); }
  100% { -moz-transform: scale(1); }
}

@-moz-keyframes grow {
  0% { -moz-transform: scale(0); }
  100% { -moz-transform: scale(1); height: 168px; width: 168px; }
}

@keyframes grow {
  0% { -moz-transform: scale(0); }
  100% { -moz-transform: scale(1); }
}

Answer 1

Ecco un esempio rudimentale di ciò che è necessario fare: jsfiddle.net/UxtJV/ . Esso utilizza un po 'di JS per aggiungere una classe per animare il cerchio. Le sue proprietà width, height, top e left sono animati ed è dato position: relative.

div.circle {
    position: relative;

    width: 0px;
    height: 0px;
    top: 50px;
    left: 50px;

    -webkit-transition-duration: 2s;
    -webkit-transition-property: all;
    -webkit-transition-timing-function: ease-in-out;

    text-align: center;
    background: red;
    color: white;
    border-radius: 100%;
    padding: 20px;
    overflow: hidden;
}

div.circle.open {
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
}​

Answer 2

Per fare ciò, l'animazione dovrebbe coinvolgere:

1. aumento larghezza e altezza.
2. aumento superiore e sinistra.

E 'un po' di lavoro, ma si deve fare esattamente quello che hai chiesto.

Answer 3

Si potrebbe provare a combinare l'animazione con la proprietà di traduzione.

Questa potrebbe essere un'altra opzione:

transform-origin: top right; /* 50% 50% or whatever*/

qui ...

Answer 4

Nel caso in cui qualcuno sta cercando la soluzione di jQuery, qui è ...

HTML

<div class=circle1></div>

CSS

.circle1 {
    position:absolute; top:50px; left:50px;
    width: 0px; height: 0px;
    border:1px solid red;
    padding:20px;
    border-radius:50%;
}

JS

$(".circle1").mouseover(function() {
      $(this).animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 0}, 200);  
}).mouseout(function() {
      $(this).animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200);
});

Ed ecco la demo - http://jsbin.com/esiLULEb/1/

Answer 5

Non c'è bisogno di utilizzare jQuery o Javascript per il vostro caso, è possibile ottenere che con CSS puro.

Non utilizzare proprietà position sui vostri div animati. Che ti farà lag animazioni. Invece utilizzare trasformare per le animazioni performanti.

<div class="circle__wrapper">
  <a class="circle" href="#"></a>
</div>

/* circle__wrapper will help you to position the div in the center of the page */
.circle__wrapper { 
  position: fixed; 
  top: 50%; 
  left: 50%; 
  -webkit-transform: translate(-50%, -50%); 
  transform: translate(-50%, -50%); 
}

.circle__wrapper a.circle { 
  display:block; 
  height: 168px; 
  width: 168px; 
  background-color: #fea733; 
  -webkit-border-radius: 50%; 
  -moz-border-radius: 50%; 
  border-radius: 50%; 
  -webkit-animation: growUp 2s 1.5s; /* You can remove 1.5s if you don't want delay */
  -moz-animation: growUp 2s 1.5s; 
  -ms-animation: growUp 2s 1.5s; 
  -o-animation: growUp 2s 1.5s; 
  animation: growUp 2s 1.5s; 
}


@-webkit-keyframes growUp {   
  0%  { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1); }
}

@-moz-keyframes growUp {
  0%  { -moz-transform: scale(0); }
  100% { -moz-transform: scale(1); }
}

@-o-keyframes growUp {
  0%  { -o-transform: scale(0); }
  100% { -o-transform: scale(1); }
}

@-ms-keyframes growUp {
  0%  { -ms-transform: scale(0); }
  100% { -ms-transform: scale(1); }
}

@keyframes growUp {
  0%  { transform: scale(0); }
  100% { transform: scale(1); }
}

Spero che questo aiuti.