CSS Properties: How to binding an animation to a division element?

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

Solution:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><!-- Declare character encoding -->
<title>How to binding an animation to a division element</title><!-- Set the title of the HTML document -->
</head>

<body>
<div class="animation"><!-- Container with animation -->
<div class="w3r"><!-- Division element for text content -->
w3resource Tutorial
</div>
<div class="cylon_eye"></div><!-- Division element for the animated eye -->
</div>
<style type="text/css"> /* CSS style start*/
w3r {
color: white; /* Set text color to white */
float: left; /* Allow the element to float to the left */
margin-right: 2%; /* Set right margin */
font-size: 20px /* Set font size to 20 pixels */            
}

.animation {
background-color: #CC3333; /* Set background color of the container */
height: 40px; /* Set height of the container */
width: 100%; /* Set width of the container */
overflow: hidden; /* Hide overflow content */
}

.cylon_eye {
background-color: #FFCC99; /* Set background color of the eye */
background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); /* Set gradient background for webkit browsers */
background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); /* Set gradient background for Firefox browsers */
background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); /* Set gradient background for Opera browsers */
background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); /* Set gradient background for other browsers */
color: white; /* Set text color to white */
height: 100%; /* Set height of the eye to 100% */
width: 20%; /* Set width of the eye to 20% */
-webkit-animation: move_eye 4s linear 0s infinite alternate; /* Apply animation to the eye for webkit browsers */
-moz-animation: move_eye 4s linear 0s infinite alternate; /* Apply animation to the eye for Firefox browsers */
-o-animation: move_eye 4s linear 0s infinite alternate; /* Apply animation to the eye for Opera browsers */
animation: move_eye 4s linear 0s infinite alternate; /* Apply animation to the eye for other browsers */
}
@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  } /* Define keyframes for animation in webkit browsers */
@-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  } /* Define keyframes for animation in Firefox browsers */
@-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  } /* Define keyframes for animation in Opera browsers */
@keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  } /* Define keyframes for animation in other browsers */
</style>
</body>
</html>

Explanation:

The HTML document contains a container div with a class of "animation" and two child divs: one for text content and another for an animated eye.
The text content div has a class of "w3r" and contains the text "w3resource Tutorial".
The animated eye div has a class of "cylon_eye" and is styled with a gradient background and animation properties.
CSS is used to define animations for the eye movement (@keyframes move_eye) and apply them to the eye element.
The animation causes the eye to move horizontally from left to right infinitely.

Live Demo:

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

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	No

Go to Exercise page