L'expansion des cercles avec des animations CSS3

Je suis en train de le faire afin que lorsque la page se charge des cercles d'apparaître, ce qui est très bien, mais j'en ai besoin pour grandir vers l'extérieur pour petits et grands à partir du centre non pas à partir du haut à gauche:

Vous pouvez voir ce que j'ai actuellement ici: http://thomasbritton.co.uk/projects/ebrd/

Idéalement, ils veulent que cela se fait en CSS, mais peut utiliser JS si c'est plus facile/plus stable.

Des idées?

Voici mon css aussi pour la partie animation:

.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); }
}

Je peux les voir grandir mais ils n'ont pas une fixzd centre.
comment dois-je aller sur l'application d'un centre fixe?
Vous auriez besoin de faire les cercles position: relative et animer leur top et left propriétés ainsi que la largeur et de la hauteur. Aussi, une note pour les non-utilisateurs de Firefox: utiliser Firefox pour voir le plein effet.
Ne fonctionne pas sous chrome 17.0.963.56
Le lien est 404 pour moi.

OriginalL'auteur thomasbritton | 2012-02-16

Voici un exemple brut de ce que vous devez faire: jsfiddle.net/UxtJV/. Il utilise un peu de JS pour ajouter une classe pour animer le cercle. C'est width, height, top et left propriétés sont animées et il est donné 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;
}

OriginalL'auteur Bojangles

2

Pour ce faire, votre animation devrait se traduire par:
1. augmentation de la largeur et de la hauteur.
2. augmenter en haut et à gauche.
C'est un peu de travail, mais il doit faire exactement ce que vous avez demandé.

OriginalL'auteur Eran Egozi
1

Vous pouvez essayer de combiner votre animation avec la traduction de la propriété.

Cela pourrait être une autre option:
```
transform-origin: top right; /* 50% 50% or whatever*/
```
posté ici...

Il semble que ça devrait fonctionner, mais ne semble pas faire quoi que ce soit. Ont essayé de les mettre dans la trame de l'animation et les options standard dans le sélecteur

OriginalL'auteur Maroshii

Juste au cas où quelqu'un est à la recherche de travail jQuery solution, la voici...

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%;
}

$(".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);
});

Et voici la démo - http://jsbin.com/esiLULEb/1/

OriginalL'auteur Armand

Vous n'avez pas à utiliser Jquery ou Javascript dans votre cas, vous pouvez le faire avec de la pure CSS.

Ne pas utiliser la position de la propriété sur votre animation divs. Qui peut vous causer de lag animations. Au lieu d'utiliser pour transformer performant animations.

<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); }
}

Espère que cette aide.

OriginalL'auteur Caner Şahin

Vous devez vous connecter pour publier un commentaire.