Speeding up the animation (CSS) of a transformation animation

I am currently working on a way to decrease the transform speed (flip around the y-axis) to just 0.05 seconds. Essentially, I want the image to complete the flip in 0.05 seconds. However, no matter what changes I make in the CSS, the flip animation remains the same. Can anyone offer some assistance?

CSS

<style> 

.a {
  width: 50px;
  height: 50px;

  position: relative;
  animation-name: box;
  animation-duration: 10s;
  transition: transform 0.05s; 
 
 animation-iteration-count: infinite;
  animation-direction: alternate;


}

@keyframes box {
  0%   { left: var(--rando0); top: var(--rando1); transform: rotateY(180deg);}
  25%  {   transform: rotateY(180deg) left: var(--rando2); top: var(--rando3);}
  50%  { left: var(--rando4); top: var(--rando5);  transform: rotateY(180deg);}
  75%  {   transform: rotateY(180deg) left: var(--rando6); top: var(--rando7);}
  100% { left: var(--rando8); top: var(--rando9);  transform: rotateY(180deg);}


}

HTML

<img src="image.gif" alt="prgm" class='a left'  class='character'>

JS

<script>
const root = document.querySelector(":root");
for(let i = 0; i < 10; i++) {
  root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`);
}
</script>

Thank you for any help or guidance!

Answer №1

You have the ability to run two animations simultaneously. The following code snippet maintains the left/top animation at 10s and introduces a rotate animation at 0.5s. (It's worth noting that at 0.05s, the rotation effect may result in a very flashy appearance, which may not be what you intended).

const root = document.querySelector(":root"); // locating the root element
for (let i = 0; i < 10; i++) {
  root.style.setProperty(`--rando${i}`, `${Math.floor(Math.random() * 200) + 1}px`);
}
.a {
  width: 50px;
  height: 50px;
  position: relative;
  animation-name: box, rotate;
  animation-duration: 10s, 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes rotate {
  0%,
  49.99%,
  100% {
    transform: rotateY(0);
  }
  50%,
  99.99% {
    transform: rotateY(180deg);
  }
}

@keyframes box {
  0% {
    left: var(--rando0);
    top: var(--rando1);
  }
  25% {
    left: var(--rando2);
    top: var(--rando3);
  }
  50% {
    left: var(--rando4);
    top: var(--rando5);
  }
  75% {
    left: var(--rando6);
    top: var(--rando7);
  }
  100% {
    left: var(--rando8);
    top: var(--rando9);
  }
}
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzhbV48pXypX9otxEVYrZ1etEOZqym7693twATGzSGqg&s" alt="prgm" class='a left' class='character'>

UPDATE: Upon further clarification, it has been specified that the image should instantly flip, then return to its original orientation every half second.

The keyframes named rotate have been adjusted so that the rotation remains at 0 degrees for half of the animation time, flips 180 degrees, and stays at that position for the second half.

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

I'm looking to merge the functionality of AngularJS confirm with SweetAlert (Swal)

I am currently working on a project and I need to implement a confirmation prompt for the logout functionality. I want to use Sweet Alert for this purpose. While I have found solutions for both the confirmation and Sweet Alert separately, I am struggling t ...

Is it possible to read JSON data from a POST request using Django DRF?

When attempting to send data via a jQuery POST request, I am able to access the data from both the JavaScript client side and the Python Django Rest Framework serializer create method on the backend. The console.log output is: { "wo_r": [ { " ...

Solution to bypass JavaScript PHP login system

Creating a login/register system with JavaScript to display specific divs for the system: 1st div = menu option to either log in or register 2nd div = shows login form or register form depending on what was clicked (login or register) 3rd div = displays ...

Navigating between pages in a multi-page setup using vue.js: A comprehensive guide

I came across a helpful post at this link about implementing multiple pages in Vue.js CLI. After setting up multiple pages, I was excited to test it out. However, I encountered an issue when trying to access the different pages from the URL http://localho ...

Placing a div with absolute positioning inside another div with absolute positioning raises the question of how it functions when the outer div is not set to position: relative

Trying to grasp the concept, I experimented with the following setup: <div id="Outer"> <div id="Inner"></div> </div> In this scenario, the outer div has a relative position and the inner div has an absolute position. This allo ...

The overflow-x: scroll !important feature is not functioning properly on Samsung Internet when using translated SVGs

I'm experiencing an issue with a div container that is filled horizontally with SVG drawings generated dynamically. The width of the container exceeds the window's width, so I added overflow-x: scroll !important to enable scrolling. However, the ...

Browser freezing due to large response when appending data with AJAX

I have been developing an application that retrieves numerous records from a database and displays them in a table. This process involves making an AJAX call and appending the new records to the existing ones. The number of records can vary greatly, rangi ...

Can a dynamic import from a Node module be exported?

I have developed an npm package that utilizes a dynamic import(). This package is written in TypeScript and compiled with the module: "esnext" compiler option, which means the import() call remains unchanged in the output. The expectation was to load this ...

Events are causing the Three.js canvas to resize

Currently, I am developing a mobile-web application using three.js. I have incorporated the meta viewport tag as well: <meta name="viewport" content="width=device-width; user-scalable=no; initial-scale:1.0; minimum-scale=1.0; maximum-scale=1.0;" > ...

Using a function as a parameter in Typescript: Anticipated no arguments, received 1.ts

I'm encountering an issue when trying to pass the doSomething function into performAction. The error message I'm receiving is Expected 0 arguments, but got 1 interface SomeInterface { name: string, id: string } function doSomethingFunction( ...

In the realm of JavaScript, the localeCompare() string method is more than willing to accept the presence of 'undefined' as a valid parameter for 'locale', while opting to outright reject any instance of

I have discovered a method to sort strings naturally const rows = ['37-SK', '4-ML', '41-NP', '2-YZ', '21', '26-BF']; console.log(rows.sort((a, b) => a.localeCompare(b, undefined, { numeric: tru ...

What is Microsoft's equivalent to an embedded Java web applet?

Is there a Microsoft alternative to embedded Java web applets? Can you provide an example from the internet? Furthermore, why is ajax prevalent in dynamic web development compared to embedded applications? ...

Update the image source within a CSS element

I'm facing an issue with changing the source image of an Element. The situation is that I have a customized CSS script and I need to modify a logo image. Below, you can find the source code: https://i.stack.imgur.com/8HLCE.png The problem lies in at ...

Struggling to design a responsive layout as the div on the right keeps overlapping the div on the left

I recently built a React component that consists of two columns. In the left column, there's a calendar while the right column contains some text along with an input and select field. However, I noticed that when I resize the window, the elements on ...

Is there a way to make the directional light illuminate only one half of the sphere in Three js (R3F)?

I'm trying to achieve a lighting effect on a sphere using two directional lights. One light is positioned in front of the sphere to mimic sunlight, while the other is placed towards the back to represent city lights. I'm experimenting with differ ...

What is causing the essential components of the anytime jQuery plugin to seamlessly disappear into the background?

The unique jQuery plugin features have been deliberately removed, such as the current month, day, year, and hour. The question arises: why have they been disabled, and more importantly, how can we restore these key elements? It should be noted that this i ...

New to CSS Media Queries? Discover the Correct Way to Define Element Height!

Sorry for the oversized images! I'm diving into media queries for the first time. When I adjust my browser window to 320px, here's how my site displays: This is what I want it to look like on mobile phones. However, when I view it on my iPhone, ...

What are the steps to effectively cultivate an isometric rectangular box using HTML and CSS?

Starting at the top in isometric grids, like this, can be quite convenient: https://i.sstatic.net/YFh0SRmx.jpg The code below is used to create a "3d" isometric box: body { display: flex; justify-content: center; align-items: center; } .plane { ...

Adjust the size of two divs in AngularJs as needed

I have two divs covering the entire page, each at 50% width. When the lower div is clicked, I want it to expand to cover the full screen, and return to its original size on click again. Here is an example: See JQuery equivalent $('.wrapper div.green ...

Facebook Like Button AJAX Event Handler

I have multiple like buttons on my webpage and I want to activate a PHP script (using AJAX) when someone clicks "like" or "dislike". I've noticed that clicking "like" triggers both a POST and GET request, while clicking "dislike" only triggers a post ...