Spécifie ce qui se passe si les débordements contenu d'un élément boîte
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 |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 43.0 | 10.0 | 16.0 5.0 -moz- | 9.0 | 30.0 15.0 -webkit- 12.0 -o- |
Exemple Animer la couleur de fond du rouge au bleu :
<!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-ratioB
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-shadowC
clip , color , column-count , column-gap , column-rule , column-rule-color , column-rule-width , column-width , columnsF
filter , flex , flex-basis , flex-grow , flex-shrink , font , font-size , font-size-adjust, font-stretch, font-weightG
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-rowsH
heightL
left , letter-spacing , line-heightM
margin , margin-bottom , margin-left , margin-right , margin-top , max-height , max-width , min-height , min-widthO
object-position , opacity , order , outline , outline-color , outline-offset , outline-widthP
padding , padding-bottom , padding-left , padding-right , padding-top , perspective , perspective-originR
right , rotateS
scaleT
text-decoration-color , text-indent , text-shadow , top , transform , transform-origin , translateV
vertical-align , visibilityW Z
width , word-spacing et z-index