css3을 사용하여 페이지를 새로 고치지 않고 애니메이션을 반복 재생하는 방법

Question

안녕하세요, css3.It을 사용하여 애니메이션 효과를 적용하고 있습니다. 브라우저에서 제대로 작동합니다. 버튼을 클릭하면 웹 페이지에서 한 번만 실행되고 다시 버튼을 클릭합니다. 그것은 동일하게 남아 있습니다. 내가 다시 놀고 싶다면, 페이지를 새로 고쳐야합니다 .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> 

Answer 1

"myfirst"는 클래스 이름이 아니며 애니메이션 이름입니다. "# div1"을 사용하는 경우 "div1"ID를 검색하지만 요소 클래스 이름은 "div1"입니다 (점으로 선택 : $ ('. div1')). DOM로드 후 자바 스크립트를 실행해야합니다. 현재 요소가로드되기 전에 id "button"을 찾고 있습니다. 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> 

편집 : 불투명도 전이없이 애니메이션 후에 소자 숨기지 않고 : U 애니메이션 필요한 경우 http://jsfiddle.net/FirePanther/L2pf5wku/1

Answer 2

하는 무한 될 루프의 경우 애니메이션 반복 횟수는 무한대 여야합니다.

-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;} 

    }