CSS Animations (scale)

Hamoudeeh Messages postés 16 Date d'inscription Statut Membre Dernière intervention -
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention - 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 :)

Afficher la suite

2 réponses

Réponse 1 / 2

Meilleure réponse
La meilleure réponse est la réponse qui a été validée par nos équipes.
animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 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
1. Hamoudeeh Messages postés 16 Date d'inscription Statut Membre Dernière intervention
  
  Justement je ne veux pas de hover; j'aimerai que l'animations sois "infinite linear"
  Merci :)
  
  0

animostab Messages postés 3003 Date d'inscription Statut Membre Dernière intervention 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

CSS Animations (scale)

2 réponses

Discussions similaires

Newsletters