CSS max-Exemple d'animation de l'attribut width-Éditeur en ligne d'exemple(oldtoolbag.com)

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS max-Exemple d'animation de l'attribut width- Tutoriel de base(oldtoolbag.com)</title>
<style>
.animated {
	width: 500px;
	padding: 40px 0;
	font: bold 46px sans-serif;
	text-align: center;
    background: #aaccaa;	
    border: 1px solid #63a063;
    -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
    animation: test 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    50% {max-width: 150px;}
}
/* Syntaxe standard */
@keyframes test {
    50% {max-width: 150px;}
}
</style>
</head>
<body>
	<p> <strong>Alerte :</strong>：Les animations CSS dans Internet Explorer 9et ne fonctionne pas dans les versions précédentes. max-L'attribut width ne peut pas être animé de manière lisse comme d'autres attributs animables.</p>
<p> <strong>Attention :</strong>：Max pour le cadre DIV suivant-L'attribut width passe de sa valeur initiale “ none” à “ 150px”， puis retourne à la valeur initiale “ none” jusqu'à une nombre illimité de fois . max-L'attribut width surcharge l'attribut width de l'élément.</p>
	<div class="animated">Box</div>
</body>
</html>