CSS Properties: How to make an element move gradually down?
Solution:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>How to make an element move gradually down</title>
<style type="text/css">
div{
width: 120px;
height: 120px;
background: #CC63FF;
position :relative;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
}
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
</style>
</head>
<body>
<p><strong>w3resource Tutorial</strong></p>
<div>@keyframe</div>
</body>
</html>
Live Demo:
See the Pen keyframes-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
![]() |
![]() |
![]() |
![]() |
![]() |
Yes | Yes | Yes | Yes | Yes |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
HTML-CSS: Tips of the Day
CSS height in percent not working :
You need to set a 100% height on all your parent elements, in this case your body and html. This fiddle shows it working.
html, body { height: 100%; width: 100%; margin: 0; } div { height: 100%; width: 100%; background: #F52887; } <html><body><div></div></body></html>
Ref: https://bit.ly/3vgtdfA
- Exercises: Weekly Top 12 Most Popular Topics
- Pandas DataFrame: Exercises, Practice, Solution
- Conversion Tools
- JavaScript: HTML Form Validation
- SQL Exercises, Practice, Solution - SUBQUERIES
- C Programming Exercises, Practice, Solution : For Loop
- Python Exercises, Practice, Solution
- Python Data Type: List - Exercises, Practice, Solution
- C++ Basic: Exercises, Practice, Solution
- SQL Exercises, Practice, Solution - exercises on Employee Database
- SQL Exercises, Practice, Solution - exercises on Movie Database
- SQL Exercises, Practice, Solution - exercises on Soccer Database
- C Programming Exercises, Practice, Solution : Recursion