Outline CSS-Ejemplo de animación de la propiedad width-editor de ejemplo en línea(w3editor en línea de ejemplo(codebox.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Outline CSS-Ejemplo de animación de la propiedad width- Tutoriales básicos(oldtoolbag.com)</title>/title>
<style>
.animated {
	width: 200px;
	relleno: 60px 0;
	margen: 100px;
	fuente: negrita 46px sans-serif;
	fondo: #e6e6fa;
	outline: 5px sólido #7d7de6;
	text-align: center;	
    -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
    animation: test 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    50% {outline-width: 50px;}
}
/* Sintaxis estándar */
@keyframes test {
    50% {outline-width: 50px;}
}
</style>
</head>
<body>
	<p> <strong>Advertencia:</strong>：Las animaciones CSS en Internet Explorer 9y no funciona en versiones anteriores.</p>
<p> <strong>Nota:</strong>：El outline de los elementos DIV siguientes-La propiedad width desde su valor inicial ", 5px" se convierte en ", 50px", luego regresa al valor inicial ", 5px" hasta el infinito.</p>
	<div class="animated">Box</div>
</body>
</html>