取消CSS中的动画-Java 学习之路

Hello ，我've an issue with an animation in CSS, I'我试图在CSS中制作"3d"翻转卡动画 . 我已经有了一个工作版本，但在这个版本上，这张卡只旋转了一次，但我想制作一个动画，旋转/缩放/等...

Here is the function I use to rotate the card :

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

第一个版本按下按钮时工作 add css -webkit-transform: rotation rules in the css file ，使卡片翻转，一切正常 . https://jsfiddle.net/3Lnt4fe3/4/

在css文件中没有工作的第二个版本 add css animation-name rule in the css file 已经声明了@keyframe . 动画运行良好但是当它结束时，旋转被取消... https://jsfiddle.net/3Lnt4fe3/5/

有人可以帮我阻止取消动画吗？ Thanks

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>

回复于 2024-04-29T05:53:41+08:00

取消CSS中的动画

1 回答

相关问题