Exercise v3.0

×

×

Correct!

Add the following 5 steps to the animation "example" (using 0%, 25%, 50%, 75%, and 100%):

0% - Set left position to "0px", top position to: "0px"
25% - Set left position to "0px", top position to: "200px"
50% - Set left position to "200px", top position to: "200px"
75% - Set left position to "200px", top position to: "0px"
100% - Set left position to "0px", top position to: "0px"

<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {left:0px; top:0px;} 25% {left:0px; top:200px;} 50% {left:200px; top:200px;} 75% {left:200px; top:0px;} 100% {left:0px; top:0px;} } </style> <body> <div>This is a div</div> </body>

<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {left:0px;top:0px;} 25% {left:0px;top:200px;} 50% {left:200px;top:200px;} 75% {left:200px;top:0px;} 100% {left:0px;top:0px;} } </style> <body> <div>This is a div</div> </body>

<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {top:0px;left:0px;} 25% {top:200px;left:0px;} 50% {top:200px;left:200px;} 75% {top:0px;left:200px;} 100% {top:0px;left:0px;} } </style> <body> <div>This is a div</div> </body>

<style> div { width: 100px; height: 100px; position: relative; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {top:0px; left:0px;} 25% {top:200px; left:0px;} 50% {top:200px; left:200px;} 75% {top:0px; left:200px;} 100% {top:0px; left:0px;} } </style> <body> <div>This is a div</div> </body>

Not Correct

Click here to try again.

Correct!

<style>
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  0%   {w3exercise_input_no_0
;}
  25%  {w3exercise_input_no_1
;}
  50%  {w3exercise_input_no_2
;}
  75%  {w3exercise_input_no_3
;}
  100% {w3exercise_input_no_4
;}
}
</style>

<body>
  <div>This is a div</div>
</body>