在CSS中取消動畫

你好，我在CSS中有一個動畫的問題，我試圖在CSS中製作一個「3d」翻轉卡動畫。我已經有一個工作版本，但在這個版本卡只是旋轉一次，但我想做一個動畫，旋轉/放大/等...在CSS中取消動畫

這裏是我用來旋轉卡的功能：

function test() { 
    var sheet = window.document.styleSheets[0] 

    /* Working */ 
    //sheet.insertRule('.flip-container .flipper{-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);}', sheet.cssRules.length); 

    /* Isn't working */ 
    sheet.insertRule('.flip-container .flipper{animation-name: test; animation-duration: 1.5s; animation-delay: 0.1s;}', sheet.cssRules.length); 
}

誰的作品添加的第一個版本的CSS -webkit-變換：在CSS文件中，當按鈕被按下循環規則，使卡片翻轉和一切正常。 https://jsfiddle.net/3Lnt4fe3/4/

誰不工作新增CSS動畫名稱規則在CSS文件，在CSS文件中的第二個版本中，@keyframe已聲明。動畫運行良好，但當它結束時，旋轉取消... https://jsfiddle.net/3Lnt4fe3/5/

有人可以幫助我防止取消動畫？感謝

來源

2017-09-14 Trietch

您需要添加animation-fill-mode: forwards這個工作你正在尋找方式：

.container { 
 
    width:  500px; 
 
    height:  260px; 
 
    position: relative; 
 
    perspective: 800px; 
 
} 
 

 
.flip-container { 
 
    -webkit-perspective: 1000; 
 
    -moz-perspective: 1000; 
 
    -o-perspective:  1000; 
 
    perspective:   1000; 
 

 
    height: 100px; 
 
} 
 

 
.flip-container, .front, .back { 
 
    margin: 0 auto; 
 
\t width: 500px; 
 
\t height: 427px; 
 
} 
 

 
.flipper{ 
 
    margin-top: 50px; 
 
    height:  325px; 
 

 
\t -webkit-transition:  0.6s; 
 
\t -webkit-transform-style: preserve-3d; 
 
\t -moz-transition:   0.6s; 
 
\t -moz-transform-style: preserve-3d; 
 
    -o-transition:   0.6s; 
 
\t -o-transform-style:  preserve-3d; 
 

 
\t transition:    1.5s; 
 
\t transform-style:   preserve-3d; 
 
} 
 

 
.front, .back { 
 
\t -webkit-backface-visibility: hidden; 
 
\t -moz-backface-visibility: hidden; 
 
    -o-backface-visibility:  hidden; 
 
\t backface-visibility:   hidden; 
 
\t position:     absolute; 
 
\t top:       0; 
 
\t left:      0; 
 
} 
 

 
.front { 
 
\t z-index: 2; 
 
} 
 

 
.back { 
 
\t -webkit-transform: rotateY(180deg); 
 
\t -moz-transform: rotateY(180deg); 
 
    -o-transform:  rotateY(180deg); 
 
\t transform:   rotateY(180deg); 
 
} 
 

 
@keyframes test { 
 
    0{ 
 
     
 
     -webkit-transform: rotateY(0); 
 
     -moz-transform: rotateY(0); 
 
     -o-transform:  rotateY(0); 
 
     transform:   rotateY(0); 
 
     -webkit-transform: rotateY(0); 
 
    } 
 
    100% 
 
    { 
 
     -webkit-transform: rotateY(-180deg); 
 
     -moz-transform: rotateY(-180deg); 
 
     -o-transform:  rotateY(-180deg); 
 
     transform:   rotateY(-180deg); 
 
     -webkit-transform: rotateY(-180deg); 
 
    } 
 
} 
 

 
/* 
 
-webkit-transform: rotateY(-180deg); 
 
-moz-transform: rotateY(-180deg); 
 
-o-transform: rotateY(-180deg); 
 
transform: rotateY(-180deg); 
 
-webkit-transform: rotateY(-180deg); 
 
*/

<link rel="stylesheet" type="text/css" href="style.css"> 
 

 
<!-- Bootstrap CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 

 
<title>School Calendar</title> 
 

 
<body> 
 
    <div class="flip-container"> 
 
     <div class="flipper blurred-bg tinted"> 
 
      <div class="front"> 
 
       <div class="jumbotron" id="card"> 
 
        <h1>FRONT</h1> 
 

 
        <div class="text-center"> 
 
         <a onclick="test()" id="validate" href="#" class="btn btn-lg btn-info btn-block" role="button" aria-disabled="true">FLIP</a> 
 
        </div> 
 

 
        <script> 
 
         function test() { 
 
          var sheet = window.document.styleSheets[0] 
 

 
          sheet.insertRule('.flip-container .flipper{animation-name: test; animation-duration: 1.5s; animation-delay: 0.1s; animation-fill-mode: forwards}', sheet.cssRules.length); 
 
          //sheet.insertRule('.flip-container .flipper{-webkit-transform: rotateY(-180deg);-moz-transform: rotateY(-180deg);-o-transform: rotateY(-180deg);transform: rotateY(-180deg);-webkit-transform: rotateY(-180deg);}', sheet.cssRules.length); 
 

 
         } 
 
        </script> 
 
       </div> 
 
      </div> 
 
      <div class="back"> 
 
       <div class="jumbotron" id="card"> 
 
        <h1>BACK</h1> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2017-09-14 18:22:02 Dekel

我已經找到了「動畫填充模式：前鋒」在互聯網上，但我把它添加到錯誤的地方。感謝您的幫助！ – Trietch

在CSS中取消動畫

回答

相關問題