---
id: 587d78a7367417b2b2512ae2
title: Create Visual Direction by Fading an Element from Left to Right
challengeType: 0
videoUrl: ''
localeTitle: Criar direção visual desvanecendo um elemento da esquerda para a direita
---
## Description
Para este desafio, você mudará a opacity
de um elemento animado para que ele se desvanece gradualmente ao atingir o lado direito da tela. Na animação exibida, o elemento redondo com o fundo gradiente se move para a direita pela marca de 50% da animação, conforme a regra @keyframes
.
## Instructions
Segmente o elemento com o id da ball
e adicione a propriedade de opacity
definida como 0.1 a 50%
, para que o elemento se desvanece à medida que se desloca para a direita.
## Tests
```yml
tests:
- text: A regra de keyframes
para o desvanecimento deve definir a propriedade de opacity
como 0.1 em 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
```js
// solution required
```