---
id: 587d78a7367417b2b2512ae2
title: Create Visual Direction by Fading an Element from Left to Right
challengeType: 0
videoUrl: 'https://scrimba.com/c/cGJqqAE'
---
## Description
For this challenge, you'll change the 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
Target the element with the id of ball
and add the opacity
property set to 0.1 at 50%
, so the element fades as it moves to the right.
## Tests
```yml
tests:
- text: The keyframes
rule for fade should set the opacity
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 keyframes
rule for fade should set the opacity
property to 0.1 at 50%.');
```
## Challenge Seed
## Solution