CSS borde-Ejemplo de animación de propiedad top-editor de ejemplo en línea(w)3editor en línea de ejemplo(codebox.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<título>CSS borde-Ejemplo de animación de propiedad top- 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;	
    border: 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% {border-top: 20px sólido índigo;}
}
/* Sintaxis estándar */
@keyframes test {
    50% {border-top: 20px sólido índigo;}
}
</style>
</head>
<body>
	<p> <fuerte>：Advertencia：</fuerte>：Las animaciones CSS en Internet Explorer 9y versiones anteriores no funcionan.</p>
<p> <fuerte>：Advertencia</fuerte>：En todos los bordes individuales-La propiedad top solo puede configurar border en CSS-top-ancho y border-top-animación de la propiedad color. border-La propiedad style no se puede configurar con animación. Para más detalles, consulte CSS <a href="https://es.oldtoolbag.com/css-referencia/css-border-top-property.html" target="_top">border-top </a>Propiedades de atajos. </p>
	<div class="animated">Box</div>
</body>
</html>