5.0 KiB
5.0 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78a7367417b2b2512adf | Learn How the CSS @keyframes and animation Properties Work | 0 | https://scrimba.com/c/cakprhv |
Description
@keyframes
rule. The animation properties control how the animation should behave and the @keyframes
rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:
animation-name
sets the name of the animation, which is later used by @keyframes
to tell CSS which rules go with which animations.
animation-duration
sets the length of time for the animation.
@keyframes
is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of @keyframes
and the animation properties:
#anim {For the element with the
animation-name: colorful;
animation-duration: 3s;
}
@keyframes colorful {
0% {
background-color: blue;
}
100% {
background-color: yellow;
}
}
anim
id, the code snippet above sets the animation-name
to colorful
and sets the animation-duration
to 3 seconds. Then the @keyframes
rule links to the animation properties with the name colorful
. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.
Instructions
rect
, by setting the animation-name
to rainbow and the animation-duration
to 4 seconds. Next, declare a @keyframes
rule, and set the background-color
at the beginning of the animation (0%
) to blue, the middle of the animation (50%
) to green, and the end of the animation (100%
) to yellow.
Tests
tests:
- text: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.
testString: assert($('#rect').css('animation-name') == 'rainbow', 'The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.');
- text: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.
testString: assert($('#rect').css('animation-duration') == '4s', 'The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.');
- text: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.
testString: assert(code.match(/@keyframes\s+?rainbow\s*?{/g), 'The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.');
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.
testString: assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.');
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.
testString: assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.');
- text: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.
testString: assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.');
Challenge Seed
<style>
div {
height: 40px;
width: 70%;
background: black;
margin: 50px auto;
border-radius: 5px;
}
#rect {
}
</style>
<div id="rect"></div>
Solution
// solution required