我想在 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');
});
应使用以下代码在 100% 关键帧上停止：
animation-fill-mode: forwards;
这在之前已经在这里解决过：在最后一帧停止 CSS3 动画
我已经解决了。除了我的关键帧，一切都很完美。由于我一开始让它旋转 180 度，这意味着它将以 180% 的速度再旋转 100 度以恢复其原始方向。我不能以 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);}
}