CSS Animations (scale)

Fermé
Hamoudeeh Messages postés 16 Date d'inscription jeudi 23 janvier 2014 Statut Membre Dernière intervention 19 juillet 2015 - 30 mars 2015 à 11:18
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 - 31 mars 2015 à 14:40
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 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
Modifié par animostab le 30/03/2015 à 15:56
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 16 Date d'inscription jeudi 23 janvier 2014 Statut Membre Dernière intervention 19 juillet 2015
31 mars 2015 à 10:36
Justement je ne veux pas de hover; j'aimerai que l'animations sois "infinite linear"
Merci :)
0
animostab Messages postés 2829 Date d'inscription jeudi 10 mars 2005 Statut Membre Dernière intervention 11 novembre 2019 738
31 mars 2015 à 14:40
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