<!DOCTYPE html>
<html>
<head>
<title>CSS3 @keyframes Rule Primer Tutorial - RJM Programming - Thanks to http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp</title>
<script type='text/javascript'>
var mydiv=null, myduration=40, mydelay=6, mycolour='ff0000', myimage='nala.jpg';
function ol() {
mydiv=document.getElementsByTagName('div')[0];
myduration=location.search.split('duration=')[1] ? location.search.split('duration=')[1].split('&')[0] : 40;
mydelay=location.search.split('delay=')[1] ? location.search.split('delay=')[1].split('&')[0] : 6;
mycolour=location.search.split('colour=')[1] ? decodeURIComponent(location.search.split('colour=')[1].split('&')[0]) : 'ff0000';
myimage=location.search.split('bimage=')[1] ? decodeURIComponent(location.search.split('bimage=')[1].split('&')[0]) : '../../PHP/nala.jpg';
if (myduration != 40) {
document.getElementById('duration').value=myduration;
mydiv.style.WebkitAnimationDuration='' + myduration + 's'
mydiv.style.animationDuration='' + myduration + 's';
}
if (mydelay != 6) {
document.getElementById('delay').value=mydelay;
mydiv.style.WebkitAnimationDelay='' + mydelay + 's'
mydiv.style.animationDelay='' + mydelay + 's';
}
if (mycolour.toLowerCase() != 'ff0000' && mycolour.toLowerCase() != 'red') {
if (mycolour.length == 6) {
document.getElementById('colour').value='#' + mycolour;
mydiv.style.backgroundColor='#' + mycolour;
} else {
document.getElementById('colour').value='' + mycolour;
mydiv.style.backgroundColor='' + mycolour;
}
}
if (myimage != '../../PHP/nala.jpg') {
document.getElementById('bimage').value=myimage;
if (myimage == '') {
mydiv.style.background=null;
document.getElementById('tni').style.display='none';
} else {
document.getElementById('tni').src=myimage;
mydiv.style.background="url('" + myimage + "')";
}
} else {
mydiv.style.background="url('" + myimage + "')";
}
}
</script>
<style>
body
{
background-color: black; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), gray); /* For Chrome and Safari */
background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), gray); /* For old Fx (3.6 to 15) */
background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), gray); /* For pre-releases of IE 10*/
background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), gray); /* For old Opera (11.1 to 12.0) */
background-image: linear-gradient(to bottom, hsl(0, 80%, 70%), gray); /* Standard syntax; must be last */
}
p
{
color: white;
position: absolute;
top: 80vh;
left:0px;
}
div
{
width:16px;
height:200px;
background-color:red;
position:relative;
border: 5px dashed green;
-moz-border-radius: 35px;
border-radius: 35px;
filter: alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
animation:mymove 6s 40s;
-webkit-animation:mymove 6s 40s; /* Safari and Chrome */
animation-duration: 40s;
animation-delay: 6s;
}
@keyframes mymove
{
0% {top:0px; left:0px; width:16px; height:200px; opacity:1.00; background-color:red;}
7% {top:0px; left:33px; width:28px; height:188px; opacity:0.88; background-color:maroon;}
14% {top:0px; left:67px; width:40px; height:176px; opacity:0.76; background-color:yellow;}
21% {top:0px; left:100px; width:52px; height:164px; opacity:0.64; background-color:olive;}
28% {top:25px; left:100px; width:64px; height:152px; opacity:0.52; background-color:lime;}
35% {top:50px; left:100px; width:76px; height:140px; opacity:0.40; background-color:green;}
42% {top:75px; left:100px; width:88px; height:128px; opacity:0.28; background-color:aqua;}
50% {top:100px; left:100px; width:100px; height:116px; opacity:0.16; background-color:teal;}
57% {top:100px; left:75px; width:88px; height:128px; opacity:0.28; background-color:blue;}
64% {top:100px; left:50px; width:76px; height:140px; opacity:0.40; background-color:navy;}
71% {top:100px; left:25px; width:64px; height:152px; opacity:0.52; background-color:fuchsia;}
78% {top:100px; left:0px; width:52px; height:164px; opacity:0.64; background-color:purple;}
85% {top:67px; left:0px; width:40px; height:176px; opacity:0.76; background-color:silver;}
93% {top:33px; left:0px; width:28px; height:188px; opacity:0.88; background-color:gray;}
100% {top:0px; left:0px; width:16px; height:200px; opacity:1.00; background-color:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; width:16px; height:200px; opacity:1.00; background-color:red;}
7% {top:0px; left:33px; width:28px; height:188px; opacity:0.88; background-color:maroon;}
14% {top:0px; left:67px; width:40px; height:176px; opacity:0.76; background-color:yellow;}
21% {top:0px; left:100px; width:52px; height:164px; opacity:0.64; background-color:olive;}
28% {top:25px; left:100px; width:64px; height:152px; opacity:0.52; background-color:lime;}
35% {top:50px; left:100px; width:76px; height:140px; opacity:0.40; background-color:green;}
42% {top:75px; left:100px; width:88px; height:128px; opacity:0.28; background-color:aqua;}
50% {top:100px; left:100px; width:100px; height:116px; opacity:0.16; background-color:teal;}
57% {top:100px; left:75px; width:88px; height:128px; opacity:0.28; background-color:blue;}
64% {top:100px; left:50px; width:76px; height:140px; opacity:0.40; background-color:navy;}
71% {top:100px; left:25px; width:64px; height:152px; opacity:0.52; background-color:fuchsia;}
78% {top:100px; left:0px; width:52px; height:164px; opacity:0.64; background-color:purple;}
85% {top:67px; left:0px; width:40px; height:176px; opacity:0.76; background-color:silver;}
93% {top:33px; left:0px; width:28px; height:188px; opacity:0.88; background-color:gray;}
100% {top:0px; left:0px; width:16px; height:200px; opacity:1.00; background-color:red;}
}
</style>
</head>
<body onload='ol();'>
<div></div>
<p><strong>Note:</strong> Rule @keyframes not supported in Internet Explorer 9 & earlier versions. <br>We have a <input style='width:80px;' id='duration' type='number' step='1' min='0' onblur=" location.href=document.URL.split('#')[0].split('?')[0] + '?duration=' + this.value + '&delay=' + document.getElementById('delay').value + '&bimage=' + document.getElementById('bimage').value + '&colour=' + document.getElementById('colour').value.replace('#',''); " onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?duration=' + this.value + '&delay=' + document.getElementById('delay').value + '&bimage=' + document.getElementById('bimage').value + '&colour=' + document.getElementById('colour').value.replace('#',''); " value='40'></input> second duration & <input style='width:80px;' id='delay' type='number' step='1' min='0' onblur=" location.href=document.URL.split('#')[0].split('?')[0] + '?delay=' + this.value + '&duration=' + document.getElementById('duration').value + '&bimage=' + document.getElementById('bimage').value + '&colour=' + document.getElementById('colour').value.replace('#',''); " onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?delay=' + this.value + '&duration=' + document.getElementById('duration').value + '&bimage=' + document.getElementById('bimage').value + '&colour=' + document.getElementById('colour').value.replace('#',''); " value='6'></input> second delay <input style='width:80px;' id='colour' type='color' value='#ff0000' title='Colour' onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?delay=' + document.getElementById('delay').value + '&duration=' + document.getElementById('duration').value + '&bimage=' + document.getElementById('bimage').value + '&colour=' + this.value.replace('#',''); " ></input> <input type='url' title='Background image' value='../../PHP/nala.jpg' id='bimage' onblur=" location.href=document.URL.split('#')[0].split('?')[0] + '?duration=' + document.getElementById('duration').value + '&delay=' + document.getElementById('delay').value + '&bimage=' + document.getElementById('bimage').value + '&colour=' + document.getElementById('colour').value.replace('#',''); " onchange=" location.href=document.URL.split('#')[0].split('?')[0] + '?duration=' + document.getElementById('duration').value + '&delay=' + document.getElementById('delay').value + '&bimage=' + document.getElementById('bimage').value + '&colour=' + document.getElementById('colour').value.replace('#',''); " ></input> <img title='Thumbnail' style='width:45px;' src='../../PHP/nala.jpg' id='tni'></img> animation happening.</p>
</body>
</html>