如何獲取關鍵幀動畫以停止上一個動畫
[英]How to get keyframes animation to stop on last animation
問題描述
我希望在100％關鍵幀上停止動畫。
在這里，jQuery顯示在底部。 我要完全弄清楚的是如何為這些框設置動畫，以便如果單擊頂部的任何一個，它將移至底部，然后底部的移至頂部。 有任何想法嗎？
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
@keyframes active {
0% {
transform: translateX(0px);
}
33% {
transform: translateX(105px);
}
66% {
transform: rotateY(180deg) translateY(210px);
}
100% {
transform: rotateY(0deg) translateY(210px);
}
}
.all-wrap {border: 1px solid black;
}
.container {width:100px;height:100px;background-color:red;
perspective:400px;perspective-origin:50% 100px;
margin-right:auto;
display: block;
border: 2px solid purple;
animation-fill-mode: forwards;
background-repeat: no-repeat;
}
.containerActive {
animation: active 3s ease-in-out;
animation-fill-mode: forwards;
animation-iteration-count: 1;
transform-style: preserve-3d;
animation-direction: normal;
}
</style>
</head>
<body>
<div class="all-wrap">
<div class="container">
</div>
<div class="container">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="/js/rotate.js"></script>
</body>
</html>
/* Here is the jQuery: */
$('[class*="container"]').on('click', function(){
$(this).toggleClass('containerActive');
});
2 個解決方案
解決方案1
0 已采納 2017-03-20 00:37:23
解決方案2
0 2017-03-20 06:16:15
我已經解決了 除了關鍵幀，一切都很完美。 由於我首先將其旋轉了180度，這意味着它將再以100％旋轉180度以恢復其原始方向。 我無法100％聲明它，因為我需要100％才能獲得正確的翻譯。 因此，我想到了一個聰明的主意，如何使旋轉度成為我想要的一半？ 這將使它看起來像一整圈。
關鍵幀：
@keyframes active {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, 105px);}
75% {transform: rotateY(90deg) translate(-105px, 105px);}
100% {transform: translate(0px, 105px);}
}
@keyframes active2 {
0% {transform: translateX(0px);}
25% {transform: translateX(105px);}
50% {transform: translate(105px, -105px);}
75% {transform: rotateY(90deg) translate(-105px, -105px);}
100% {transform: translate(0px, -105px);}
}
如何在最后一張幻燈片上停止動畫
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.