RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/css-properties/animation-fill-mode-answer.php below:

Website Navigation

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

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:53 (UTC/GMT +8 hours)

Go to Exercise page

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

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4