CSS Properties: How to binding an animation to a division element?
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 |
What is the difficulty level of this exercise?
Test your Programming skills with w3resource's quiz.
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics