Tips for pausing keyframes animation on its final animation frame

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

Answer №1

To ensure the animation stops at 100% keyframe, use the following code:

animation-fill-mode: forwards;

This issue was discussed earlier on this thread: How to Stop CSS3 Animation on Final Frame

Answer №2

After some troubleshooting, I finally cracked the code. The issue was with my key frames - everything else was spot on. Initially, I had it rotating 180 degrees, which meant that it needed to rotate another 180 degrees at 100% to return to its original position. But here's the catch: I couldn't set it to rotate 100% because that would mess up the translation. So, I came up with a clever workaround. What if I made the rotation degrees half of what I actually wanted? This way, it would still appear as though it completed a full turn.

Here are the revised key frames:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Open up a new window and block Google Analytics from tracking

Currently, I am facing a challenge with integrating another company's Google Analytics code into our system. Although I have a basic understanding of the code, I lack substantial experience. The specific code segment in question is aimed at tracking ...

jQuery unable to access data from cross-origin JSON service URL

Similar Question: Issues with JQuery not receiving JSON data? <script type="text/javascript> var url = "http://local.yahooapis.com/LocalSearchService/V3/localSearch?appid=YahooDemo&query=pizza&zip=10504&results=2&output=j ...

Fade out effect applied to change Ajax div

i need help with the following: display content from X.div fade out content in a nav div on click load new content show updated content $(document).ready(function(){ $('#allcontent').load('data/home.html'); $('.hovers ...

Stopping free jqgrid disabled toolbar buttons from reacting to mouse clicks can be achieved by implementing specific coding techniques that

When using Free jqgrid, toolbar disabled buttons may trigger click events on mouse clicks which can lead to invalid code execution. To demonstrate this, open the page below in Chrome and click on a disabled inline edit or pager button. A rectangle will app ...

Ordering tables according to the last column using jQuery

Despite trying various solutions provided in other discussions, I have been unable to get the table to display in descending order based on the Weight Score column. Here is a reference of the table: <table align="center" border="1px" cellpadding="5" id ...

The order of execution is not maintained for $.getJSON() calls within the $.each() loop

As I iterate through an HTML table, I am making a $.getJSON() request based on the data in each row. My goal is to retrieve the data from that $.getJSON call and update the corresponding row with it. Unfortunately, when I run my code, it seems to be execu ...

Aligning the Navigation icons on my webpage

<nav> <ul> <li><a href="index.php">Home</a></li> <li><a href="index.php?about">About</a></li> <li><a href="index.php?products">Products</ ...

Adjustable width for flexbox column

Is there a way to adjust the width of the first flex column so that it only takes up the space of its content? .flex { display: flex; } .inside { flex: 1; border: 1px solid #000; } <div class="flex"> <div class="inside inside-left"& ...

A JavaScript object that performs a callback function

I am delving into learning node.js and experimenting with creating a new TCP Server connection. Check out the code snippet below: var server = require('net').createServer(function(socket) { console.log('new connection'); socket.se ...

express-validator never accepts valid input

Currently, I am working on a project using the most recent version of nodejs and express. The basic site setup is complete, and now I am focusing on implementing user authentication based on what I've learned from this course. However, no matter what ...

Is there a way to showcase images next to each other within an array in Angular 8, like having 2 images in a row and then another 2 in the next row?

Here is the HTML code I created and tested: <div class="row"> <div *ngFor="let url of urls" class="col-md-6"> <img [src]="url" alt="Image not found" height="250px" width="350px" (click)="imageClick(url)"> </div> < ...

The AJAX request to the REST service is failing to trigger the success function in the AJAX call

Struggling with some issues related to AJAX, specifically when calling a Java REST server that I've developed. While I am relatively new to AJAX, I have put in quite a bit of effort searching for solutions. The problem arises when making a call from a ...

Creating a dynamic slider using jQuery

Here is the code snippet I have been working on: var current_slide = 1, animation_time = 1000, pause = 3000, slide_container = $('.slide_container'), interval, height = slide_container.height(), slides ...

Angular 7: An unexpected error occurred when trying to inject TripsMenu into MenuWidgetComponent in AppModule

Encountering an issue in angular 7, where I am trying to inject my MenuWidgetComponent in the home component. I have imported it in the widget component and exported it via index.ts. However, the following error persists: I searched online but couldn&apos ...

Endless loading on NodeJS server local host

My NodeJS setup is serving files, but the page seems to be stuck loading. Here's a snippet from my index.js file: const express = require("express"); const path = require("path"); const http = require("http"); const socke ...

Firebase and React are having trouble communicating because it is unable to access the properties of 'auth'

The issue with the 'Cannot read properties of undefined (reading 'auth')' error in login.js may be related to where it is coming from. Login.js: import { useContext, useState, useEffect } from "react"; import { Link, useNavigate } f ...

JavaScript has issues with undefined array elements

Even though there is data in bindInfo, the array elements in Bind are showing as undefined. Any recommendations? let bindinfo = { clientid: 1, clientname: 'Web Client', nowutc: now_utc, bindlist: Bindings(this.props.bindDetails) ...

Issues with Callbacks Inquiry

I'm struggling to understand how to implement callbacks in this scenario. Despite researching and reading explanations, I can't seem to grasp the concept. Below is a snippet of my code: function retrieveTransactionInfo(transactionUrl) { re ...

Creating a function that uses setInterval to continuously update the input with a specific value

I am looking to use the setInterval function to continuously update the value of #test1. Additionally, I want the value of #test1 to be cleared and reset to 1 second after the user clicks a button. Example output can be found here: http://jsfiddle.net/eK ...

Tips for simulating a dropdown selection from a remote location

I have multiple dropdown selection menus where changing the option in one menu affects the options in the next menu, and so on. I want to programmatically trigger a change (without user interaction) in the dropdown menu that will activate the JavaScript f ...