1.8 KiB
1.8 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d78a7367417b2b2512ae2 | Create Visual Direction by Fading an Element from Left to Right | 0 | https://scrimba.com/c/cGJqqAE |
Description
opacity
of an animated element so it gradually fades as it reaches the right side of the screen.
In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the @keyframes
rule.
Instructions
ball
and add the opacity
property set to 0.1 at 50%
, so the element fades as it moves to the right.
Tests
tests:
- text: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.
testString: assert(code.match(/@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi), 'The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.');
Challenge Seed
<style>
#ball {
width: 70px;
height: 70px;
margin: 50px auto;
position: fixed;
left: 20%;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff,
#ffcccc
);
animation-name: fade;
animation-duration: 3s;
}
@keyframes fade {
50% {
left: 60%;
}
}
</style>
<div id="ball"></div>
Solution
var code = "@keyframes fade {50% { left: 60%; opacity: 0.1;}}"