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:
Live Demo:
See the Pen animation-answer by w3resource (@w3resource) on CodePen.
See the solution in the browser
Supported browser
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