如何在不使用css3刷新页面的情况下一次又一次地播放动画

时间：2015-01-28 04:45:23

标签： javascript jquery html5 css3

您好我正在使用css3做一些动画效果。它在浏览器中工作正常。当我点击按钮时它只在网页中运行一次，我再次点击该按钮它仍然是相同的。如果我想再次播放，我需要刷新page.i得到了一些代码，但它的工作。我不知道我错在哪里。这是我的代码，请提出一些建议。

   <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 个答案:

答案 0 :(得分：3)

“myfirst”不是类名，而是动画名称。 使用“＃div1”你正在搜索id“div1”，但你的元素类名是“div1”（用点选择它：$（'。div1'））。 加载dom后你必须执行你的javascript。目前，您在加载元素之前搜索id“按钮”。 您正在使用jquery，因此您可以在$(function(){ /* here */ });中执行代码，或者只是将脚本移到底部。

这里是动画部分（演示：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>

编辑： 没有不透明度过渡并且没有在动画后隐藏元素：http://jsfiddle.net/FirePanther/L2pf5wku/1

答案 1 :(得分：1)

如果你需要动画是无限循环，动画迭代计数应该是无限的。 

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

试试这个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;}

   }
相关问题
最新问题