CSS Properties: How bottom property is animatable?

Last update on February 20 2024 12:25:04 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type as HTML -->
<html><!-- Root element of the HTML document -->
<head><!-- Contains metadata about the HTML document -->
<title>How bottom property is animatable</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
#xyzdiv { /* Defines a CSS rule for elements with ID "xyzdiv" */
position: absolute; /* Sets the position of the element to absolute */
width: 200px; /* Sets the width of the element to 200 pixels */
height: 100px; /* Sets the height of the element to 100 pixels */
border: 3px solid #FF0000; /* Sets the border properties of the element */
background-color: #46C3FF; /* Sets the background color of the element */
bottom: 20px; /* Sets the distance between the bottom edge of the element and its nearest positioned ancestor to 20 pixels */
-webkit-animation: mymove 5s infinite; /* Specifies the animation for WebKit browsers */
animation: mymove 5s infinite; /* Specifies the animation for all browsers */
}
@keyframes mymove { /* Defines a keyframe animation named "mymove" */
50% {bottom: 300px;} /* Sets the value of the bottom property to 300 pixels at the midpoint of the animation */
}
</style><!-- Ends the CSS style block -->
</head><!-- Ends the head section of the HTML document -->
<body><!-- Contains the content of the HTML document -->
<p>w3resource Tutorial</p><!-- Displays a paragraph with the text "w3resource Tutorial" -->
<div id="xyzdiv">This division element position : animatable</div><!-- Displays a div element with ID "xyzdiv" and the specified text -->
</body><!-- Ends the body section of the HTML document -->
</html><!-- Ends the HTML document -->

Explanation:

The position: absolute; CSS property sets the positioning method of the element to absolute, positioning it relative to its nearest positioned ancestor.
The width: 200px; CSS property sets the width of the element to 200 pixels.
The height: 100px; CSS property sets the height of the element to 100 pixels.
The border: 3px solid #FF0000; CSS property sets the border properties of the element to a 3-pixel wide solid red border.
The background-color: #46C3FF; CSS property sets the background color of the element to light blue (#46C3FF).
The bottom: 20px; CSS property sets the distance between the bottom edge of the element and its nearest positioned ancestor to 20 pixels.
The @keyframes rule defines a keyframe animation named "mymove" that changes the value of the bottom property to 300 pixels at the midpoint of the animation.
The animation is applied to the #xyzdiv element, causing its bottom position to change over time.

Live Demo:

See the Pen bottom-animatable-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page