---
id: 587d78a7367417b2b2512ae2
title: Create Visual Direction by Fading an Element from Left to Right
challengeType: 0
videoUrl: ''
localeTitle: 通过从左到右淡化元素来创建视觉方向
---
## Description
对于此挑战,您将更改动画元素的opacity
,使其在到达屏幕右侧时逐渐变淡。在显示的动画中,具有渐变背景的圆形元素按照@keyframes
规则向右移动动画的50%标记。
## Instructions
使用id为ball
定位元素,并将opacity
属性设置为0.1( 50%
,因此元素向右移动时会逐渐消失。
## Tests
```yml
tests:
- text: fade的keyframes
规则应将opacity
属性设置为0.1为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
```