Propriétés CSS animées

par 2 contributeurs :

Cette page liste toutes les propriétés CSS et indique si elles sont animables, et comment.

Animations
Propriété Animable
animation non
animation-delay non
animation-direction non
 
animation-duration non
animation-fill-mode non
animation-iteration-count non
 
animation-name non
 
animation-play-state non
animation-timing-function non
Transitions
Propriété Animable
transition non
transition-delay non
transition-duration non
transition-property non
transition-timing-function non
Transformations
Propriété Animable
transform oui, comme une transformation
transform-origin oui, comme une simple liste de une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
transform-style non
perspective oui, comme une longueur
perspective-origin oui, comme une simple liste de une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
backface-visibility non
Couleur
Propriété Animable
color oui, comme une couleur
opacity oui, comme un nombre
Colonnes
Propriété Animable
columns pour chaque propriété individuelle de la propriété raccourcie :
  • column-width: oui, comme une longueur
  • column-count: oui, comme un entier
column-width oui, comme une longueur
column-count oui, comme un entier
column-gap oui, comme une longueur
column-rule pour chaque propriété individuelle de la propriété raccourcie :
  • column-rule-color: oui, comme une couleur
  • column-rule-style: non
  • column-rule-width: oui, comme une longueur
column-rule-color oui, comme une couleur
column-rule-style non
column-rule-width oui, comme une longueur
break-before non
break-after non
break-inside non
column-span non
column-fill non
Texte
Propriété Animable
hyphens non
letter-spacing oui, comme une longueur
word-wrap non
overflow-wrap non
text-transform non
tab-size non (Cela peut changer d'ici à ce que la spécification atteigne le statut de Candidate Recommendation)
text-align non
text-align-last non
text-indent oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
direction non
white-space non
word-break non
word-spacing oui, comme une longueur
Décorations de texte
Propriété Animable
text-decoration pour chaque propriété individuelle de la propriété raccourcie :
  • text-decoration-color: oui, comme une couleur
  • text-decoration-style: non
  • text-decoration-line: non
text-decoration-color oui, comme une couleur
text-decoration-style non
text-decoration-line non
text-decoration-skip non
text-shadow oui, comme une liste d'ombres
text-underline-position non
Boîtes flexibles
Propriété Animable
align-content non
align-items non
align-self non
flex-basis oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
flex-direction non
flex-flow non
flex-grow oui, comme un nombre, except between 0 and other values
flex-shrink oui, comme un nombre, except between 0 and other values
flex pour chaque propriété individuelle de la propriété raccourcie :
  • flex-grow: oui, comme un nombre, except between 0 and other values
  • flex-shrink: oui, comme un nombre, except between 0 and other values
  • flex-basis: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
flex-wrap non
justify-content non
order oui, comme un entier
Arrière-plans et bordures
Propriété Animable
background pour chaque propriété individuelle de la propriété raccourcie :
  • background-color: oui, comme une couleur
  • background-image: non
  • background-clip: non
  • background-position: oui, comme une liste répétable de une simple liste de une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
  • background-size: oui, comme une liste répétable de une simple liste de une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel. . This means keyword values are not animatable.
  • background-repeat: non
  • background-attachment: non
background-attachment non
background-clip non
background-color oui, comme une couleur
background-image non
background-origin non
background-position oui, comme une liste répétable de une simple liste de une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
background-repeat non
background-size oui, comme une liste répétable de une simple liste de une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel. . This means keyword values are not animatable.
border pour chaque propriété individuelle de la propriété raccourcie :
  • border-color: pour chaque propriété individuelle de la propriété raccourcie :
    • border-bottom-color: oui, comme une couleur
    • border-left-color: oui, comme une couleur
    • border-right-color: oui, comme une couleur
    • border-top-color: oui, comme une couleur
  • border-style: non
  • border-width: pour chaque propriété individuelle de la propriété raccourcie :
    • border-bottom-width: oui, comme une longueur
    • border-left-width: oui, comme une longueur
    • border-right-width: oui, comme une longueur
    • border-top-width: oui, comme une longueur
border-bottom pour chaque propriété individuelle de la propriété raccourcie :
  • border-bottom-color: oui, comme une couleur
  • border-bottom-style: non
  • border-bottom-width: oui, comme une longueur
border-bottom-color oui, comme une couleur
border-bottom-left-radius oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
border-bottom-right-radius oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
border-bottom-style non
border-bottom-width oui, comme une longueur
border-color pour chaque propriété individuelle de la propriété raccourcie :
  • border-bottom-color: oui, comme une couleur
  • border-left-color: oui, comme une couleur
  • border-right-color: oui, comme une couleur
  • border-top-color: oui, comme une couleur
border-image non
border-image-outset non
border-image-repeat non
border-image-slice non
border-image-source non
border-image-width non
border-left pour chaque propriété individuelle de la propriété raccourcie :
  • border-left-color: oui, comme une couleur
  • border-left-style: non
  • border-left-width: oui, comme une longueur
border-left-color oui, comme une couleur
border-left-style non
border-left-width oui, comme une longueur
border-radius pour chaque propriété individuelle de la propriété raccourcie :
  • border-top-left-radius: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
  • border-top-right-radius: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
  • border-bottom-right-radius: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
  • border-bottom-left-radius: oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
border-right pour chaque propriété individuelle de la propriété raccourcie :
  • border-right-color: oui, comme une couleur
  • border-right-style: non
  • border-right-width: oui, comme une longueur
border-right-color oui, comme une couleur
border-right-style non
border-right-width oui, comme une longueur
border-style non
border-top pour chaque propriété individuelle de la propriété raccourcie :
  • border-top-color: oui, comme une couleur
  • border-top-style: non
  • border-top-width: oui, comme une longueur
border-top-color oui, comme une couleur
border-top-left-radius oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
border-top-right-radius oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
border-top-style non
border-top-width oui, comme une longueur
border-width pour chaque propriété individuelle de la propriété raccourcie :
  • border-bottom-width: oui, comme une longueur
  • border-left-width: oui, comme une longueur
  • border-right-width: oui, comme une longueur
  • border-top-width: oui, comme une longueur
Modèle de boîte
Propriété Animable
box-decoration-break non
box-shadow oui, comme une liste d'ombres
margin oui, comme une longueur
margin-bottom oui, comme une longueur
margin-left oui, comme une longueur
margin-right oui, comme une longueur
margin-top oui, comme une longueur
padding oui, comme une longueur
padding-bottom oui, comme une longueur
padding-left oui, comme une longueur
padding-right oui, comme une longueur
padding-top oui, comme une longueur
box-sizing non
max-height oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
min-height oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
height oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
max-width oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
min-width oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
width oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
overflow non
overflow-x non
overflow-y non
visibility oui, comme une visibilité
Tableau
Propriété Animable
border-collapse non
border-spacing non
caption-side non
empty-cells non
table-layout non
vertical-align oui, comme une longueur
Positionnement
Propriété Animable
bottom oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
left oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
right oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
top oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
float non
clear non
position non
z-index oui, comme un entier
Polices
Propriété Animable
font pour chaque propriété individuelle de la propriété raccourcie :
font-family non
font-variant non
font-weight oui, comme une graisse de police
font-stretch oui, comme une font stretch
font-size oui, comme une longueur
line-height oui, comme un nombre, une longueur
font-feature-settings non
font-size-adjust oui, comme un nombre
font-style non
Images
Propriété Animable
image-rendering non
image-orientation non
Compteurs et listes
Propriété Animable
counter-increment non
counter-reset non
list-style non
list-style-image non
list-style-position non
list-style-type non
Page
Propriété Animable
orphans non
page-break-after non
page-break-before non
page-break-inside non
widows non
Interface utilisateur
Propriété Animable
outline pour chaque propriété individuelle de la propriété raccourcie :
  • outline-color: oui, comme une couleur
  • outline-width: oui, comme une longueur
  • outline-style: non
outline-color oui, comme une couleur
outline-width oui, comme une longueur
outline-style non
outline-offset oui, comme une longueur
cursor non
resize non
text-overflow non
Contenu généré
Propriété Animable
content non
quotes non
Divers
Propriété Animable
clip oui, comme un rectangle
display non
unicode-bidi non
ime-mode non

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, tregagnon
Dernière mise à jour par : teoli,