CSS 取消动画

Question

你好，我在 CSS 中遇到动画问题，我正在尝试在 [=36= 中制作“3d”翻转卡片动画].我已经有一个工作版本，但在这个版本上，卡片只旋转一次，但我想制作一个动画，rotations/zooms/ect...

这是我用来旋转卡片的函数：

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-transform: css 文件中的旋转规则 按下按钮时，使卡翻转，一切都很好。 https://jsfiddle.net/3Lnt4fe3/4/

第二版谁不行在css文件中添加css动画名称规则css ，@keyframe 已经声明。动画很好运行但是当它结束时，旋转被取消了...... https://jsfiddle.net/3Lnt4fe3/5/

谁能帮我防止动画被取消？谢谢

Answer 1

您需要添加 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;
 width:  500px;
 height: 427px;
}

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

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

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

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

.front {
 z-index: 2;
}

.back {
 -webkit-transform: rotateY(180deg);
 -moz-transform:    rotateY(180deg);
  -o-transform:      rotateY(180deg);
 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>

CSS 取消动画

Cancellation of an animation in CSS

html

css

animation

webkit