Hi i am doing some animation effect using css3.It works fine in the browser.when i click button it runs only once in the webpage and i click again that button it remains same.if i want to play again,i need to refresh the page.i got some codes in the but its working.i dont know where i did mistake. this is my code kindly give some suggestions.
<script>
$('#button').click(function() {
var el = $('#div1').addClass('myfirst');
setTimeout(function() {
el.removeClass('myfirst');
}, 1000);
});
</script>
<style>
.center
{
width:960px;
height:500px;
float:left;
margin-left:100px;
margin-top:10px;
border:1px solid #ff0000;
}
.center1
{
width:780px;
height:500px;
float:left;
margin-left:80px;
margin-top:-500px;
border:1px solid #00ff00;
position:absolute;
}
.tfp{
width: 1000px;
height: 500px;
border-radius: 0%;
margin-left: -30px;
margin-top: 0px;
text-align: center;
background-image: url('tfp.jpg');
-webkit-animation-name: tfp-scale;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 1s;
-webkit-animation-delay: 0.2s;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: both;
-moz-animation-name: tfp-scale;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 1s;
-moz-animation-delay: .6s;
-moz-animation-timing-function: ease;
-moz-animation-fill-mode: both;
animation-name: tfp-scale;
animation-iteration-count: 1;
animation-duration: 1s;
animation-delay: .6s;
animation-timing-function: ease;
animation-fill-mode: both;
}
@-webkit-keyframes tfp-scale {
0% {
-webkit-transform: scale(2.5);
}
100% {
-webkit-transform: scale(0.8);
}
}
.div1 {
width: 100px;
height: 100px;
background: red;
float:left;
margin-left:200px;
margin-top:200px;
position: absolute;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode:forwards;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background:red; left:0px; top:-100px; opacity:0;}
to {background:red; left:-90px; top:-180px; opacity:1;}
}
/* Standard syntax */
@keyframes myfirst {
from {background:red; left:0px; top:-100px;}
to {background:red; left:-90px; top:-180px;}
}
.div2
{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
float:left;
margin-left:600px;
margin-top:200px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst1;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
@-webkit-keyframes myfirst1 {
from {background:yellow; left:100px; top:0px;opacity:0;}
to {background:yellow; left:370px; top:-180px; opacity:1;}
}
/* Standard syntax */
@keyframes myfirst1 {
from {background:yellow; left:100px; top:0px; }
to {background:yellow; left:370px; top:-180px; }
}
.div3
{
width: 100px;
height: 100px;
background: green;
position: absolute;
float:left;
margin-left:0px;
margin-top:350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst2;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
@-webkit-keyframes myfirst2 {
from {background:green; left:450px; top:0px; opacity:0;}
to {background:green; left:110px; top:70px; opacity:1;}
}
/* Standard syntax */
@keyframes myfirst2 {
from {background:green; left:0px; top:0px;}
to {background:green; left:300px; top:-200px;}
}
.div4
{
width: 100px;
height: 100px;
background: orange;
position: relative;
float:left;
margin-left:600px;
margin-top:-350px;
opacity:0;
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst3;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode:forwards;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst1;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-play-state: running;
}
@-webkit-keyframes myfirst3 {
from {background:orange; left:0px; top:0px; opacity:0;}
to {background:orange; left:260px; top:250px; opacity:1;}
}
/* Standard syntax */
@keyframes myfirst3 {
from {background:orange; left:0px; top:0px;}
to {background:orange; left:0px; top:200px;}
}
</style>
<body>
<div class="center">
<div class="tfp">
</div>
<div class="center1"></div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<button id="button">play</button>
</body>