---
id: 587d78a7367417b2b2512ae1
title: Create Movement Using CSS Animation
challengeType: 0
videoUrl: ''
localeTitle: 使用CSS动画创建运动
---
## Description
当元素具有指定position
(例如fixed
或relative
,可以在动画规则中使用right
, left
, top
和bottom
的CSS偏移属性来创建移动。如下面的示例所示,您可以通过将50%
关键帧的top
属性设置为50px向下然后向上推动项目,但将第一个( 0%
)和最后一个( 100%
)关键帧设置为0px。 @keyframes rainbow {
0%{
背景颜色:蓝色;
顶部:0px;
}
50%{
背景颜色:绿色;
上:50px;
}
100%{
背景颜色:黄色;
顶部:0px;
}
}
## Instructions
为div
动画添加水平运动。使用left
偏移属性,添加到@keyframes
规则,因此彩虹从0%
0像素开始,在50%
移动到25像素,在100%
以-25像素结束。不要替换编辑器中的top
属性 - 动画应该具有垂直和水平运动。
## Tests
```yml
tests:
- text: 0%
的@keyframes
规则应使用0px的left
偏移量。
testString: 'assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?top:\s*?0(px)?;\s*?left:\s*?0(px)?;\s*?}/gi), "The @keyframes
rule for 0%
should use the left
offset of 0px.");'
- text: 50%
的@keyframes
规则应该使用25px的left
偏移量。
testString: 'assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?top:\s*?50px;\s*?left:\s*?25px;\s*?}/gi), "The @keyframes
rule for 50%
should use the left
offset of 25px.");'
- text: 100%
的@keyframes
规则应使用-25px的left
偏移量。
testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?top:\s*?0(px)?;\s*?left:\s*?-25px;\s*?}/gi), "The @keyframes
rule for 100%
should use the left
offset of -25px.");'
```
## Challenge Seed
## Solution
```js
// solution required
```