Para animar un elemento, debe conocer las propiedades de la animación y la regla @keyframes . Las propiedades de la animación controlan el comportamiento de la animación y la regla @keyframes controla lo que sucede durante esa animación. Hay ocho propiedades de animación en total. Este desafío lo mantendrá simple y cubrirá primero los dos más importantes: animation-name establece el nombre de la animación, que luego es utilizada por @keyframes para indicar a CSS qué reglas van con qué animación. animation-duration establece el período de tiempo para la animación. @keyframes es cómo especificar exactamente qué sucede dentro de la animación a lo largo de la duración. Esto se hace dando propiedades CSS para "marcos" específicos durante la animación, con porcentajes que van desde 0% a 100%. Si comparas esto con una película, las propiedades de CSS para 0% es cómo se muestra el elemento en la escena inicial. Las propiedades de CSS para el 100% es cómo aparece el elemento al final, justo antes de que salgan los créditos. Luego, CSS aplica la magia para hacer la transición del elemento a lo largo de la duración dada para representar la escena. Aquí hay un ejemplo para ilustrar el uso de @keyframes y las propiedades de animación:

#anim {
Nombre de la animación: colorido;
animación-duración: 3s;
}
@keyframes colorful {
0% {
color de fondo: azul;
}
100% {
color de fondo: amarillo;
}
}

Para el elemento con el anim identificación, el fragmento de código anterior establece la animation-name de colorful y establece la animation-duration de 3 segundos. Luego, la regla @keyframes enlaza con las propiedades de animación con el nombre colorful . Establece el color azul al principio de la animación (0%), que pasará a amarillo al final de la animación (100%). No está limitado solo a las transiciones de principio a fin, puede establecer propiedades para el elemento para cualquier porcentaje entre 0% y 100%.

Cree una animación para el elemento con el id rect , estableciendo el animation-name la animation-name en arco iris y la animation-duration la animation-duration en 4 segundos. A continuación, declare una regla de @keyframes y establezca el background-color al principio de la animación ( 0% ) en azul, la mitad de la animación ( 50% ) en verde y el final de la animación ( 100% ) en amarillo.

```yml tests: - text: El elemento con id de rect debe tener una propiedad de animation-name con un valor de arco iris. testString: 'assert($("#rect").css("animation-name") == "rainbow", "The element with id of rect should have an animation-name property with a value of rainbow.");' - text: El elemento con id de rect debe tener una propiedad de animation-duration con un valor de 4s. testString: 'assert($("#rect").css("animation-duration") == "4s", "The element with id of rect should have an animation-duration property with a value of 4s.");' - text: La regla @keyframes debe usar el animation-name de animation-name de rainbow. testString: 'assert(code.match(/@keyframes\s+?rainbow\s*?{/g), "The @keyframes rule should use the animation-name of rainbow.");' - text: La regla @keyframes para rainbow debe usar un background-color de background-color azul al 0%. testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of blue at 0%.");' - text: La regla @keyframes para el arco iris debe usar un background-color de background-color verde al 50%. testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of green at 50%.");' - text: La regla @keyframes para el arco iris debe usar un background-color de background-color amarillo al 100%. testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), "The @keyframes rule for rainbow should use a background-color of yellow at 100%.");' ```