CSS Properties: How to animate something moving from one place to another and have it stay there?

Last update on February 15 2024 10:04:24 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><!-- Declare character encoding -->
<title>How to animate something moving from one place to another and have it stay there</title><!-- Set the title of the HTML document -->
</head>
<body>
<p>Move your mouse over the grey box</p><!-- Instruction for the user -->
<div class="xyz"><!-- Container for the animated elements -->
<div class="grows">w3resource Tutorials</div><!-- Division element for the first animated text -->
<div class="growsandstays">w3resource Tutorials</div><!-- Division element for the second animated text -->
</div>
<style type="text/css"> /* CSS style start*/
.xyz {
border-top: 100px solid #ccc; /* Set border color and size */
height: 300px; /* Set height of the container */
font-family: Georgia, "Times New Roman", Times, serif; /* Set font family */
color: #89CC00; /* Set text color */
}
@keyframes grow {
0% { font-size: 0 } /* Define initial font size */
100% { font-size: 40px } /* Define final font size */
}
@-webkit-keyframes grow {
0% { font-size: 0 } /* Define initial font size for Webkit browsers */
100% { font-size: 40px } /* Define final font size for Webkit browsers */
}
.xyz:hover .grows { /* Apply animation to the first text on hover */
animation-name: grow; /* Name of the animation */
animation-duration: 5s; /* Duration of the animation */
-webkit-animation-name: grow; /* Name of the animation for Webkit browsers */
-webkit-animation-duration: 5s; /* Duration of the animation for Webkit browsers */
}
.xyz:hover .growsandstays { /* Apply animation to the second text on hover */
animation-name: grow; /* Name of the animation */
animation-duration: 5s; /* Duration of the animation */
animation-fill-mode: forwards; /* Animation fill mode to retain the final state */
-webkit-animation-name: grow; /* Name of the animation for Webkit browsers */
-webkit-animation-duration: 5s; /* Duration of the animation for Webkit browsers */
-webkit-animation-fill-mode: forwards; /* Animation fill mode for Webkit browsers */
}
</style>
</body>
</html>

Explanation:

The HTML document contains a container div with two child divs for animated text.
CSS is used to style the elements, setting border color, height, font family, and text color.
Keyframes (@keyframes grow) are defined to specify the animation behavior, increasing the font size from 0 to 40 pixels.
Animation is triggered when hovering over the container div (xyz), with one of the child divs (grows) growing in size.
The second child div (growsandstays) also grows in size on hover, but animation-fill-mode: forwards; is added to make it stay in its final state after the animation completes.

Live Demo:

See the Pen animation-fill-mode-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page