CSS Animations (scale)

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

Réponse 1 / 2
animostab Messages postés 2829 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
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
Réponse 2 / 2
animostab Messages postés 2829 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
1

Discussions similaires

Présentation Impress pour effectuer un diaporama
Petronille337 -
Raymond PENTIER -

7 réponses
Problème d'animation dans une présentation avec PowerPoint2016
saya2 -
saya2 -

6 réponses
Conserver animation powerpoint en format pdf
katmcb91 -
Alba -

32 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
indice et exposant en css ?
yiv -
Kitkatryne -

19 réponses