CSS borde-Ejemplo de animación de propiedad left-editor de instancia en línea (w)3editor de código en línea (w)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<título>CSS borde-Ejemplo de animación de propiedad left- Tutoriales básicos(oldtoolbag.com)</título>/título>
<style>
.animated {
	ancho: 300px;
	rejilla: 40px 0;
	fuente: negrita 46px sans-serif;
	texto-alineación: centro;
    fondo: #f5d8f4;	
    borde: 2px sólido orquídea;
    -webkit-animación: test 4s infinito; /* Chrome, Safari, Opera */
    animación: test 4s infinito;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    50% {borde-left: 20px sólido índigo;}
}
/* Sintaxis estándar */
@keyframes test {
    50% {borde-left: 20px sólido índigo;}
}
</style>
</head>
<body>
	<p> <fuerte>：Advertencia：</fuerte>：CSS animación en Internet Explorer 9y versiones anteriores no funcionan.</p>
<p> <fuerte>：Nota</fuerte>：En todos los bordes individuales-propiedad left, solo borde-left-ancho y borde-left-color atributo es animable en CSS. borde-style atributo no se puede configurar animación. Para más detalles, consulte CSS <a href="https://es.oldtoolbag.com/css-referencia/css-borde-left-property.html" target="_top"> borde-left </a>Propiedades abreviadas. </p>
	<div class="animated">Box</div>
</body>
</html>