CSS Properties: How to make an element move gradually down?

Last update on February 23 2024 13:05:03 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html><!-- Begins the HTML document -->
<head><!-- Contains metadata and links to external resources -->
<title>How to make an element move gradually down</title><!-- Sets the title of the document -->
<style type="text/css"> /* Starts CSS styling */
div{ /* Selects all div elements */
  width: 120px; /* Sets the width of the div elements to 120 pixels */
  height: 120px; /* Sets the height of the div elements to 120 pixels */
  background: #CC63FF; /* Sets the background color of the div elements to #CC63FF (purple) */
  position :relative; /* Sets the positioning context of the div elements to their containing block */
  -webkit-animation: mymove 5s infinite; /* Applies the "mymove" animation to the div elements for WebKit browsers, with a duration of 5 seconds and infinite iteration */
  animation: mymove 5s infinite; /* Applies the "mymove" animation to the div elements, with a duration of 5 seconds and infinite iteration */
}
@keyframes mymove { /* Defines the keyframes for the "mymove" animation */
  0%   {top: 0px;} /* Specifies the starting position of the div elements at the top of the page */
  25%  {top: 200px;} /* Specifies the position of the div elements at 25% of the animation duration, moving them down by 200 pixels */
  75%  {top: 50px;} /* Specifies the position of the div elements at 75% of the animation duration, moving them up by 50 pixels */
  100% {top: 100px;} /* Specifies the final position of the div elements at the bottom of the page */
}
</style><!-- Ends CSS styling -->
</head>
<body>
<p><strong>w3resource Tutorial</strong></p><!-- Paragraph element with strong (bold) text -->
<div>@keyframe</div><!-- Div element with the text "@keyframe" -->
</body>
</html><!-- Ends the HTML document -->

Explanation:

This HTML document demonstrates how to use keyframe animations in CSS to make an element move gradually down and then up.
CSS comments are added to explain each section of the code.
The div selector sets the styling for all div elements, including their width, height, background color, positioning, and the animation applied to them.
The @keyframes rule defines the keyframes for the mymove animation, specifying different positions for the div elements at various points in the animation duration.
The animation moves the div element gradually down by 200 pixels at 25% of the animation duration, then up by 50 pixels at 75% of the duration, and finally settles at the bottom of the page.

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

Go to Exercise page