i'm new to making web stuff so sorry in advance for my newbyness... anyways
Ive created a SVG animation with css,
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 271.25 232.5" style="enable-background:new 0 0 271.25 232.5;" xml:space="preserve">
<defs>
<style type="text/css">
.st0{fill:#fff;stroke:#000000;stroke-width:8;stroke-miterlimit:5;}
.st0 {
stroke-dasharray: 800;
stroke-dashoffset: 0;
-webkit-animation: dash 2s linear forwards;
-o-animation: dash 2s linear forwards;
-moz-animation: dash 2s linear forwards;
animation: dash 2s linear forwards;
}
#logo {
cursor:pointer;
}
#logo:hover .st0{
fill:#000;
transition: .8s;
}
#logo.clickit .st0 {
fill: grey;
stroke: grey;
}
#-webkit-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
#-moz-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
#-o-keyframes dash {
from {
stroke-dashoffset: 800;
}
to {
stroke-dashoffset: 0;
}
}
</style>
<script type="text/javascript">
var clicker = document.querySelector('#logo');
clicker.addEventListener('click', function (){
this.classList.toggle('clickit');
});
</script>
</defs>
<path class="st0" d="M14.872,26.016c0.347,1.109,0.539,1.82,0.79,2.511c12.477,34.228,24.958,68.452,37.44,102.679
c10.294,28.223,20.59,56.445,30.883,84.67c0.501,1.373,0.697,2.684,2.854,2.678c30.238-0.082,60.478-0.068,90.716-0.02
c1.515,0.002,2.172-0.516,2.715-1.867c3.9-9.707,7.819-19.406,11.884-29.045c0.846-2.006,0.83-3.67,0.09-5.686
c-18.811-51.182-37.568-102.383-56.285-153.598c-0.636-1.74-1.439-2.373-3.355- 2.369C94.2,26.031,55.798,26.016,17.396,26.016
C16.652,26.016,15.908,26.016,14.872,26.016z M202.77,162.303c18.564-45.643,36.941-90.824,55.349- 136.08
c-35.402,0-70.482,0-105.825,0C169.125,71.6,185.857,116.709,202.77,162.303z"/>
</svg>
Id like to be able to run this animation while my website loads/refreshes but instead the animation plays through and stays onto the page not redirecting to some basic three.js code i was testing...
the index file looks like this...
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<title>TEST</title>
<script src="../build/three.min.js"></script>
<script src="../build/jquery-1.9.0.js"></script>
<meta charset="UTF-8">
<meta name="description" content="coolstuff">
<meta name="keywords" content="Keywords, blah">
<meta name="author" content="My name">
<style>
body{
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div style="text-align:center;padding:150px 0;">
<object>
<embed src="vlogo.svg" width="30%" height="30%">
</object>
</div>
<div id="WebGL-output">
</div>
<script type="text/javascript">
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth /window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xEEEEEE, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMapEnabled = true;
sphereGeometry = new THREE.SphereGeometry(10, 20, 20);
sphereMaterial = new THREE.MeshLambertMaterial({wireframe: true, color: 0x000000});
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.x = 20;
sphere.position.y = 4;
sphere.position.z = 2;
scene.add(sphere);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = -30;
camera.lookAt(scene.position);
$("#Webgl-output").append(renderer.domElement);
render();
function render(){
sphere.rotation.x += 0.02;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
});
</script>
</body>
</html>
All help is needed - thanks in advance!
Related
I made an animation inside a section on a page, but it starts when I reload the page. How do I make it start only when I scroll down to that section?
I want something like
if (scrolls to skills)
start animation
.o1 {
fill: none;
stroke: rgb(94, 217, 250);
stroke-width: 20px;
stroke-dasharray: 472;
stroke-dashoffset: 472;
animation: anim 2s linear forwards;
}
#keyframes anim {
100% {
stroke-dashoffset: 70;
}
}
<section id="skills">
<div class="skill">
<div class="outer">
<div class="inner">
<div id="number">
</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="160px" `height="160px">
<circle class="o1" cx="80" cy="80" r="70" stroke-linecap="round" />
</svg>
</div>
<script>
let number = document.getElementById("number");
let counter = 0;
setInterval(() => {
if (counter == 95) {
clearInterval();
} else {
counter += 1;
number.innerHTML = counter + "%";
}
}, 20)
</script>
</section>
following is my code, I wanna stop transtion but keep its current translateY, but following code stop transition and set translateY 0, I expect a way can get current translateY when transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
.it {
width: 300px;
height: 300px;
background-color: pink;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
</style>
</head>
<body>
<div class="it">
</div>
<script type="module">
var it = document.querySelector(".it")
setTimeout(() => {
it.style.transform = "translateY(500px)"
}, 100)
setTimeout(() => {
it.style.transform = null
}, 1000)
</script>
</body>
</html>
I wrote a method I don't know if it will satisfy you
<style>
.it {
width: 300px;
height: 300px;
background-color: pink;
transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.it-class {
transform: translateY(500px) ;
}
</style>
</head>
<body>
<div class="it">
</div>
<button>stop</button>
<script>
var it = document.querySelector(".it")
const button = document.querySelector("button")
button.onclick = () => {
it.classList.toggle('it-class')
}
</script>
I find solution, use getBoudingRectClient().y and window.scrollY can get element abs pos y in document;
so get parent abs_pos_y and element abs_pos_y to get current element pos y from parent top border(rel_pos_y),
cur_translateY = rel_pos_y - element.offsetTop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
<style>
.c {
position: relative;
border: 5px solid black;
width: 300px;
height: 300px;
}
.it {
margin-top: -200px;
width: 300px;
height: 300px;
background-color: pink;
transition: 2s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
</style>
</head>
<body>
<div class="c">
<div class="it">
</div>
</div>
<script type="module">
var it = document.querySelector(".it")
// offsetTop don't calc translateY, so use following get element abs pos y in document
var getPos = (e) => {
var rect = e.getBoundingClientRect()
return {
x: rect.x + window.scrollX,
y: rect.y + window.scrollY
}
}
setTimeout(() => {
it.style.transform = "translateY(300px)"
}, 100)
//
setTimeout(() => {
var c = document.querySelector(".c")
var cy = getPos(c).y
console.log(`cy:${cy}`)
var iy = getPos(it).y
console.log(`iy:${iy}`)
it.style.transform = `translateY(${iy - cy - it.offsetTop}px)` // iy - cy is element dist from parent top border, - it.offsetTop get translateY
}, 800)
</script>
</body>
</html>
I have an animation on a chart but I want the CSS animation to load once it becomes into the users viewport. Currently it loads on the page load but this means that once the user has scrolled to the section the animation has already occurred.
The HTML & CSS can be seen below:
.chart[data-percent='100'] .outer {
stroke-dashoffset: 0;
-webkit-animation: show100 2s;
animation: show100 2s;
}
.chart[data-percent='96'] .outer {
stroke-dashoffset: 22;
-webkit-animation: show96 2s;
animation: show96 2s;
}
.chart[data-percent='77'] .outer {
stroke-dashoffset: 123;
-webkit-animation: show75 2s;
animation: show75 2s;
}
.chart[data-percent='75'] .outer {
stroke-dashoffset: 133;
-webkit-animation: show75 2s;
animation: show75 2s;
}
.chart[data-percent='52'] .outer {
stroke-dashoffset: 257;
-webkit-animation: show52 2s;
animation: show52 2s;
}
.chart[data-percent='50'] .outer {
stroke-dashoffset: 267;
-webkit-animation: show50 2s;
animation: show50 2s;
}
.chart[data-percent='25'] .outer {
stroke-dashoffset: 401;
-webkit-animation: show25 2s;
animation: show25 2s;
}
#-webkit-keyframes show100 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 0;
}
}
#keyframes show96 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 22;
}
}
#keyframes show75 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 124;
}
}
#-webkit-keyframes show52 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 257;
}
}
#-webkit-keyframes show50 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 267;
}
}
#keyframes show25 {
from {
stroke-dashoffset: 537;
}
to {
stroke-dashoffset: 401;
}
}
<div class="row stat-wheel">
<div class="col-sm-4">
<p class="stat-figure">52%</p>
<figure class="chart" data-percent="52">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p class="white center">increase in sales generated through campaigns</p>
</div>
<div class="col-sm-4">
<p class="stat-figure">77%</p>
<figure class="chart" data-percent="77">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p class="white center">return on investment in the first 2 months</p>
</div>
<div class="col-sm-4">
<p class="stat-figure">96%</p>
<figure class="chart" data-percent="96">
<svg width="200" height="200">
<circle class="outer" cx="95" cy="95" r="85" transform="rotate(-90, 95, 95)"/>
</svg>
</figure>
<p class="white center">increase in the quality of sales leads generated</p>
</div>
</div>
You can checkout the intersection observer api, it tells you when an element becomes visible in your viewport. You can listen to it and then start your animation.
A very clean way would be using vanilla JS.
Link with explanation
// (c) 2017 Chris Ferdinandi
var isInViewport = function (elem) {
var distance = elem.getBoundingClientRect();
return (
distance.top >= 0 &&
distance.left >= 0 &&
distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
distance.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
var findMe = document.querySelector('.row stat-wheel');
window.addEventListener('scroll', function (event) {
if (isInViewport(findMe)) {
console.log('In viewport!');
} else {
console.log('Nope...');
}
}, false);
JavaScript library to animate elements as they scroll into view.
https://scrollrevealjs.org/
I have been trying to reverse the countdown in this demo from 10 down to zero Without luck.
I have tried reversing the countdown by doing this:
(1*(initialOffset/time))-initialOffset )
It did reverse the animated circle but not the countdown.
Any ideas?
Thanks
var time = 10;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h2').text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</svg>
</div>
Here is also a codepen copy:
https://codepen.io/kaolay/pen/LRVxKd
Try $('h2').text(time - i); instead of $('h2').text(i);
I also added $('h2').text(time); as the 4th line to draw 10 at the beginning
Also, the first part of the circle is not animated in your code, so I changed this line:
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
To this block:
$('.circle_animation').css('stroke-dashoffset', initialOffset);
setTimeout(() => {
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
})
var time = 10;
var initialOffset = '440';
var i = 1;
$('h2').text(time); // adding 10 at the beginning if needed
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset);
setTimeout(() => {
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
})
var interval = setInterval(function() {
$('h2').text(time - i); // here is the clue
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</svg>
</div>
If you update this line $('h2').text(time - i); then you'll get the numeric countdown. I also initalize i = 0 so that the starting number is 10:
var time = 10;
var initialOffset = '440';
var i = 0
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h2').text(time - i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
<h2>0</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</svg>
</div>
What exactly are you asking here?
"It did reverse the animated circle but not the countdown."
you are just trying to countdown?
why not set i = 10 and then do i--
If you want to invert the animation just invert all states of initial values and change i to (time-i). So it goes like this:
<div class="item">
<h2>10</h2>
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle id="circle" class="circle_animation" r="69.85699" cy="81" cx="81" stroke-width="8" stroke="#6fdb6f" fill="none"/>
</svg>
</div>
.item {
position: relative;
float: left;
}
.item h2 {
text-align:center;
position: absolute;
line-height: 125px;
width: 100%;
}
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440; /* this value is the pixel circumference of the circle */
stroke-dashoffset: 0;
transition: all 1s linear;
}
var time = 10;
var initialOffset = 440;
var i = 0
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', 0);
var interval = setInterval(function() {
$('h2').text(time-i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset*i/time);
i++;
}, 1000);
Code pen:
https://codepen.io/anon/pen/Xybpge
I am looking for a simple image loading animation. I would like to find a short and simple sollution that only uses drawing on the canvas and plain Javascript.
Pleas help
I would use a loading GIF generated by an online tool such as Ajaxload.info or Preloaders.net and place it in a div tag that you may toggle in front of the canvas element.
For more spinner generator scripts see 5 Online Loading AJAX Spinner Generator Tools.
Hope this helps!
drawProgressIndicator: function(){
var can = this.imgCanvas;
var ctx = this.imgCtx;
ctx.save();
ctx.clearRect(0, 0, can.width, can.height);
ctx.translate(can.width / 2, can.height / 2);
ctx.scale(0.4, 0.4);
ctx.rotate(-Math.PI / 2);
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 8;
ctx.lineCap = "round";
var step = this.animationStep;
ctx.fillStyle = "black";
ctx.save();
ctx.rotate(step * Math.PI / 30);
ctx.strokeStyle = "#33ccff";
ctx.fillStyle = "#33ccff";
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(68, 0);
ctx.stroke();
ctx.fill();
ctx.restore();
ctx.beginPath();
ctx.lineWidth = 14;
ctx.strokeStyle = 'gray';
ctx.arc(0, 0, 80, 0, Math.PI * 2, true);
ctx.stroke();
ctx.restore();
this.animationStep += 1;
},
Here is my loading which have 2 circle using canvas
var canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
canvas.style.backgroundColor = "black";
document.body.appendChild(canvas);
var ctx = canvas.getContext("2d");
var bigCircle = {
center: {
x: 100,
y: 100
},
radius: 50,
speed: 4
}
var smallCirlce = {
center: {
x: 100,
y: 100
},
radius: 30,
speed: 2
}
var progress = 0;
function loading() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
progress += 0.01;
if (progress > 1) {
progress = 0;
}
drawCircle(bigCircle, progress);
drawCircle(smallCirlce, progress);
requestAnimationFrame(loading);
}
loading();
function drawCircle(circle, progress) {
ctx.beginPath();
var start = accelerateInterpolator(progress) * circle.speed;
var end = decelerateInterpolator(progress) * circle.speed;
ctx.arc(circle.center.x, circle.center.y, circle.radius, (start - 0.5) * Math.PI, (end - 0.5) * Math.PI);
ctx.lineWidth = 3;
ctx.strokeStyle = "white";
ctx.fill();
ctx.stroke();
}
function accelerateInterpolator(x) {
return x * x;
}
function decelerateInterpolator(x) {
return 1 - ((1 - x) * (1 - x));
}
Hope it help
try this one ..
http://jsfiddle.net/swarnendu/Ky25d/
<html>
<head>
<style type="text/css">
#layer6,#layer7,#layer8{position: absolute;left: 0px;top: 0px;}
.anim_8{-webkit-animation-duration: 1.5s;-webkit-animation-iteration-count:infinite;-webkit-transform-origin:25px 25px;-webkit-animation-name:animation_6;-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear; -moz-animation-duration: 1.5s; -moz-animation-name: animation_6; -moz-transform-origin:25px 25px; -moz-animation-iteration-count:infinite ;
-o-animation-timing-function: linear; -o-animation-duration: 1.5s; -o-animation-name: animation_6; -o-transform-origin:25px 25px; -o-animation-iteration-count:infinite ;}
#-webkit-keyframes animation_6{
0%{ -webkit-transform: rotate(0deg) ;}
100%{ -webkit-transform: rotate(360deg) ;}
}
#-o-keyframes animation_6{
0%{ -o-transform: rotate(0deg) ;}
100%{ -o-transform: rotate(360deg) ;}
}
#-moz-keyframes animation_6{
0%{ -moz-transform: rotate(0deg) ;}
100%{ -moz-transform: rotate(360deg) ;}
}
</style>
<script type="text/javascript">
window.addEventListener("load",draw_canvas,false) ;
function draw_canvas()
{
var c6=document.getElementById("layer6");var ctx6=c6.getContext("2d"); ctx6.fillStyle="#FF000
This article:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations helped me draw my own animation.
Here is an animation that uses only javascript and canvas - animation It was created using the application canvimation the help files for this are here .
However as it does not use images and it is not simple it may not be what you are looking for.
The only other way I could think would be to use context.drawImage along with setTimeout to load a series of images on after another
OR really simply use a gif image in canvas as in the code below
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function main() {
img=document.getElementById("anigif");
Ani=$("ani");
Ani.width=500;
Ani.height400;
Ani.ctx=Ani.getContext('2d');
Ani.ctx.drawImage(img,0,0)
}
</script>
</head>
<body onload="main()">
<img id="anigif" src="http://www.mathworks.com/matlabcentral/fx_files/21944/2/DancingPeaks.gif">
<canvas id="ani"></canvas>
</body>
</html>
If you are searching for a simple loading animation with html5 canvas then here it is..
http://jsfiddle.net/swarnendu/urV4p/
<html>
<head>
<style type="text/css">
#d1,#ci1,#ci2,#ci3{position:absolute;top:0px;left:0px}
.cc2{ -webkit-animation-duration: 1s; -webkit-animation-name: loading2w; -webkit-animation-iteration-count:infinite; -moz-animation-duration: 1s; -moz-animation-name: loading2m; -moz-animation-iteration-count:infinite; -o-animation-duration: 1s; -o-animation-name: loading2o; -o-animation-iteration-count:infinite;}
.cc3{ -webkit-animation-duration: 1s; -webkit-animation-name: loading3w; -webkit-animation-iteration-count:infinite; -moz-animation-duration: 1s; -moz-animation-name: loading3m; -moz-animation-iteration-count:infinite; -o-animation-duration: 1s; -o-animation-name: loading3o; -o-animation-iteration-count:infinite;}
#-webkit-keyframes loading2w{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
#-moz-keyframes loading2m{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
#-o-keyframes loading2o{
0%{visibility:hidden;}
33%{visibility:hidden;}
33.33%{visibility:visible;}
100%{visibility:hidden;}
}
#-webkit-keyframes loading3w
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
#-moz-keyframes loading3m
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
#-o-keyframes loading3o
{
0%{visibility:hidden;}
66.33%{visibility:hidden;}
66.67%{visibility:visible;}
100%{visibility:hidden;}
}
</style>
<script type="text/javascript">
window.addEventListener("load",win_load,false);
function win_load()
{
var c10=document.getElementById("ci1");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText("Loading .",5,15);
var c10=document.getElementById("ci2");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText(" .",5,15);
var c10=document.getElementById("ci3");var ctx10=c10.getContext("2d");ctx10.fillStyle="#f00";ctx10.font="15pt Calibri";ctx10.fillText(" .",5,15);
}
</script>
</head>
<body>
<div id="d1">
<canvas id="ci1" class="cc1" width="100" height="100"></canvas>
<canvas id="ci2" class="cc2" width="100" height="100"></canvas>
<canvas id="ci3" class="cc3" width="100" height="100"></canvas>
</div>
</body>