Is there a way to halt my animation at the 100% keyframe?
What I'm attempting to accomplish is animating these boxes so that when you click on the top one, it moves to the bottom and vice versa. Any suggestions or ideas on how to achieve this?
<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>
/* jQuery Code */
$('[class*="container"]').on('click', function(){
$(this).toggleClass('containerActive');
});