CSS Animations (scale)

Hamoudeeh Messages postés 21 Statut Membre -  
animostab Messages postés 3003 Statut Membre -
Bonjour,

j'aimerai faire un animations en css de rétrécissement et j'ai découvert la balise "scale" mais j'ai pas très bien compris comment l'utiliser.
Qui pourrai m'aider ?
Merci :)

2 réponses

animostab Messages postés 3003 Statut Membre 738
 
salut

scale n'est pas une balise mais une animation css3 de transform

voila comment on fait (ex ici sur le hover)

html

<div id="madiv"></div>


css
@keyframes pop-in {
0% { transform: scale(1); }
100% { transform: scale(0.5); }
}

#madiv {
width:300px;
height:300px;
background:red;
}
#madiv:hover {
animation:pop-in 2s;
}


pense aussi que tu peux rajouter les préfixes vendeur suivant les versions des navigateurs que tu veux cibler

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
2
Hamoudeeh Messages postés 21 Statut Membre
 
Justement je ne veux pas de hover; j'aimerai que l'animations sois "infinite linear"
Merci :)
0
animostab Messages postés 3003 Statut Membre 738
 
Voila

@keyframes pop-in {
0% { transform: scale(1); }
50% { transform: scale(0.5); }
100% { transform: scale(1); }
} 

#madiv {
animation:pop-in 2s infinite;
} 


2s c'est le temps en seconde
1