-2

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>

2 Answers 2

3

"myfirst" is not the class name, it's the animation name. with "#div1" you're searching for the id "div1", but your elements class name is "div1" (select it with a dot: $('.div1')). You have to execute your javascript after the dom is loaded. Currently you're searching for the id "button" before the element is loaded. You're using jquery, so you can execute your code inside $(function(){ /* here */ }); or just move the script to the bottom.

here the animation part (Demo: http://jsfiddle.net/FirePanther/q4bedpdz/):

    <head>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <style> 
    .div {
        width: 100px;
        height: 100px;
        background: red;
        margin-left: 200px;
        margin-top: 200px;
        position: absolute;
        opacity: 0;
    }

    .myfirst {
        /* Chrome, Safari, Opera */
        -webkit-animation: myfirst 1s linear;

        /* Standard syntax */
        animation: myfirst 1s linear;
    }

    /* 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;
            opacity: 0;
        }
        to {
            background: red;
            left: -90px;
            top: -180px;
            opacity: 1;
        }
    }
    </style>
</head>
<body>
    <div class="div"></div>
    <button id="button">play</button>

    <script>
    $('#button').click(function() {
        var el = $('.div').addClass('myfirst');
        setTimeout(function() {
            el.removeClass('myfirst');
        }, 1000);
    });
    </script>
</body>

edit: without the opacity transition and without hiding the element after the animation: http://jsfiddle.net/FirePanther/L2pf5wku/1

3
  • its works but wen animation over the red box is hiding.i need that show when the animation ends Jan 28, 2015 at 5:30
  • but you've wrote opacity: 0;, you can remove the opacity part. Jan 28, 2015 at 5:32
  • thanks when animation stops it should be visible at the destination part.if i click button it should start from the starting point. Jan 28, 2015 at 5:42
1

If u need the animation to be infinite loop, the animation iteration count should be infinite.

-webkit-animation-iteration-count: infinite;   
animation-iteration-count: infinite;

Try this CSS

 .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: infinite;
-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: infinite;
-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: infinite;
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: infinite;
-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: infinite;
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: infinite;
   -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: infinite;
   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: infinite;
 -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: infinite;
 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: infinite;
  -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: infinite;
  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;}

   }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.