CSS3 @keyframes Animated
Repeating Banner Background Image
CSS3 ANIMATIONS
Every technology has its place in the modern website. I'm loving how CSS has been evolving! CSS3 is making tasks that needed to take more complicated scripting say like with JavaScript and getting the job done simply by using an element and its properties. Talk about powerful and ease! Take keyframes, for example. w3schools.com puts it this way, “CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!”. CSS3 accomplishes this by using The @keyframes Rule.
If you're looking for some excellent tutelage on the subject or on other coding technologies then I would suggest checking out Adam Khoury's YouTube Channel or better yet, Adam Khoury's Website. I don't get paid to suggest him; he's one of the first guys I found that I could listen to and found it very easy to follow when I was looking for instruction on the subject. There's literally tons of material out there but I really enjoyed this guy's tutorials. I think you will too. One more thing I like about his website, there is a ton of code on his website he offers for free and on top of that he shows you how to use his code for free. If you ask me that's tops in my books!
CSS3 CODING
/***********************
ANIMATED BANNER CSS
***********************/
div#banner {
max-width: 1000px;
height: 200px;
margin: 1em auto 2em;
border: 2px solid #0033FF;
border-radius: 6px;
overflow: hidden;
}
div#banner > #banner_backdrop {
position: relative;
background: url(../images/repeater3a.jpg) repeat-x;
width: 1320px;
height: 200px;
-webkit-animation: animateBgTile linear 5s infinite;
animation: animateBgTile linear 5s infinite;
}
/* -webkit- prefix for Chrome and Safari */
@-webkit-keyframes animateBgTile { from {right: 0;} to {right: 320px;} }
@keyframes animateBgTile { from {right: 0;} to {right: 320px;} }
div#banner > #banner_content {
position: relative;
width: 100%;
height: 200px;
margin: 20px auto;
top: -200px;
color: #fff;
font-size: 1em;
text-align: center;
}
div#banner > #banner_content h1 {
font: 3.1em AddCityboy, sans-serif;
color: #C5B358;
text-shadow: 1px 1px 2px #FFF, 3px 3px 3px #FF0;
letter-spacing: 3px;
word-spacing: 6px;
margin: 10px auto -1em;
padding: -1em;
}
div.ship_container {
max-width: 150px;
height: 200px;
margin: 0em auto;
}
div.ship {
position: relative;
background: url(../images/retroRocketRight.png);
width: 150px;
height: 90px;
top: 0px;
-webkit-animation: ship_fly linear 20s infinite;
animation: ship_fly linear 20s infinite;
}
/* -webkit- prefix for Chrome and Safari */
@-webkit-keyframes ship_fly {
10% { top: 10px; }
15% { top: 90px; }
20% { top: 40px; }
25% { left: 400px; }
35% { top: 60px; }
40% { top: 30px; }
55% { left: -400px; }
57% { top: 30px; }
65% { top: 80px; }
70% { top: 30px; }
72% { top: 60px; }
75% { top: 20px; }
77% { top: 60px; }
80% { top: 10px; }
from { left: -1000px; }
to { left: 1000px; }
}
@keyframes ship_fly {
10% { top: 10px; }
15% { top: 90px; }
20% { top: 40px; }
25% { left: 400px; }
35% { top: 60px; }
40% { top: 30px; }
55% { left: -400px; }
65% { top: 80px; }
70% { top: 30px; }
75% { top: 20px; }
from { left: -1000px; }
to { left: 1000px; }
HTML CODING
<!-- HTML CODE -->
<div id="banner">
<div id="banner_backdrop"></div>
<div id="banner_content">
<h1>Lasher Works</h1>
<div class="ship_container">
<div class="ship"></div>
</div><!-- /.ship_container -->
</div><!-- /#banner_content -->
</div><!-- /#banner -->