CSS3 borde-top-right-Ejemplo de animación de la propiedad radius-Editor en línea de ejemplo(oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<título>CSS3 borde-top-right-Ejemplo de animación de la propiedad radius- Tutoriales básicos(oldtoolbag.com)</título>
<style>
.animated {
    ancho: 300px;
	rejilla: 40px 0;
    fuente: negrita 46px sans-serif;
	texto-alineación: centro;
    fondo: #bcde76;	
    border: 2px solid #7aa327;
    -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
    animation: test 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    50% {border-top-right-radius: 80px;}
}
/* Sintaxis estándar */
@keyframes test {
    50% {border-top-right-radius: 80px;}
}
</style>
</head>
<body>
	<p> <strong>Advertencia：</strong>：CSS animación en Internet Explorer 9y no funciona en versiones anteriores.</p>
<p> <strong>Nota</strong>：El radio del borde superior derecho del elemento DIV a continuación aumenta desde su valor inicial “ 0” hasta “ 80px”， luego vuelve al valor inicial “ 0” repetidamente.</p>
	<div class="animated">Box</div>
</body>
</html>