oujood.com

Animatable fonctionalités et liste des propriétés css animables

Certaines propriétés CSS sont animables, ce qui signifie qu'elles peuvent être utilisées dans des animations et des transitions.
Les propriétés animables peuvent changer progressivement d'une valeur à une autre, comme la taille, les chiffres, le pourcentage et la couleur.

chercher |

Définition et utilisation

Une propriété CSS est animable si sa valeur peut être modifiée pendant un laps de temps donné. Certaines propriétés CSS peuvent être animées à l'aide d'Animations CSS ou de Transitions CSS. Les propriétés CSS qui définissent des paramètres d'animation tels que : animation-direction et animation-name ne sont pas animables car leur animation créerait un comportement récursif complexe.

Prise en charge des navigateurs des animations css

Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend entièrement en charge les animations CSS.

Les chiffres suivis de -webkit-, -moz- ou -o- indiquent la première version qui fonctionne avec un préfixe.
Explorateur Google Chrome Internet Explorer Firefox Safari Opera
Verssion43.0 10.0 16.0
5.0 -moz-		 9.030.0
15.0 -webkit-
12.0 -o-

Exemple Animer la couleur de fond du rouge au bleu :

      Copier le code 

<!DOCTYPE html>
<html>
<head>
<style> 
#monDIV {
  width: 300px;
  height: 200px;
  background: red;
  animation: monAnimation 5s infinite;
}

@keyframes monAnimation {
  from {background-color: red;}
  to {background-color: blue;}
}
</style>
</head>
<body>
<h1>Animation de la couleur de fond</h1>

<p>Changer progressivement la couleur de fond du rouge au bleu :<p>

<div id="monDIV"></div>

</body>
</html>

Liste des propriétés animables

Voici la liste des propriétés qui peuvent être animées en CSS :

A
aspect-ratio
B
background , background-color , background-position , background-position-x , background-position-y , background-size , border , border-bottom , border-bottom-color , border-bottom-left-radius , border-bottom-right-radius , border-bottom-width , border-color , border-left , border-left-color , border-left-width , border-right , border-right-color , border-right-width , border-spacing , border-top , border-top-color , border-top-left-radius , border-top-right-radius , border-top-width , bottom , box-shadow
C
clip , color , column-count , column-gap , column-rule , column-rule-color , column-rule-width , column-width , columns
F
filter , flex , flex-basis , flex-grow , flex-shrink , font , font-size , font-size-adjust, font-stretch, font-weight
G
grid , grid-area , grid-auto-columns , grid-auto-flow , grid-auto-rows , grid-column , grid-column-end , grid-column-gap , grid-column-start , grid-gap , grid-row , grid-row-end , grid-row-gap , grid-row-start , grid-template , grid-template-areas , grid-template-columns , grid-template-rows
H
height
L
left , letter-spacing , line-height
M
margin , margin-bottom , margin-left , margin-right , margin-top , max-height , max-width , min-height , min-width
O
object-position , opacity , order , outline , outline-color , outline-offset , outline-width
P
padding , padding-bottom , padding-left , padding-right , padding-top , perspective , perspective-origin
R
right , rotate
S
scale
T
text-decoration-color , text-indent , text-shadow , top , transform , transform-origin , translate
V
vertical-align , visibility
W Z
width , word-spacing et z-index
chapitre précédent     chapitre suivant

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE

Consulter


1tpe