Numerous rotation and resizing transitions failing to function properly

I am looking to implement a rotation and zoom in/out effect during the transition between different rotations of an image when a specific trigger occurs. The zoom should happen simultaneously with the rotation.

Check out this example here

button.addEventListener('click', function() {
  image.style.transform = 'scale(4) rotate(' + ja + 'deg) scale(0.25)';
  image.style.transition = 'transform 2s ease-in-out';
  ja+=90;
});

This code successfully works for the initial transition, but fails for subsequent transitions.

I have tried using @keyframes and states in my attempts, but none of them seem to work for this simple scenario.

javascriptcsscss-transitions

Answer №1

To create a rotating wrapper with scale animation applied to an image, follow this example:

document.querySelector('button').addEventListener('click', () => {
  const imgWrap = document.querySelector('.img-wrap');
  if ( imgWrap.classList.contains('animated') ) {
    return;
  }
  imgWrap.style.setProperty( '--rotate', Number( getComputedStyle(imgWrap).getPropertyValue('--rotate') ) + 90 );
  imgWrap.classList.add('animated');
  setTimeout( () => imgWrap.classList.remove('animated'), 2000 );
});
.img-wrap {
  --rotate: 0;
  display: inline-block;
  transition: transform 2s;
  transform: rotate(calc(var(--rotate) * 1deg));
}

.img-wrap.animated img {
  animation: rotate 2s both;
}

@keyframes rotate {
  33.333% {
    transform: scale(4);
  }
  66.666% {
    transform: scale(.25);
  }
}
<button>Rotate the Image</button>
<div class="img-wrap">
  <img src="http://i.imgur.com/8kGmXwB.png" alt="Light Bulb">
</div>

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

Stop procrastinating and take action before the JavaScript function concludes

Currently, I am experimenting with onkeydown events to capture the input value in a textarea, process it through a PHP file using Ajax post method, and display the result in an external div. However, the issue is that whenever a key is pressed, I am unable ...

javascriptajaxwait

Tips for customizing the appearance of a Bootstrap toggle switch

I'm struggling to customize my bootstrap toggle button. No matter what I try, I can't seem to make any styling changes take effect. All I really need to do is increase the width of the button, but even that seems impossible. Here's a link t ...

cssbootstrap-4togglebutton

Vue JS - Unable to locate module (datepicker)

Today marks my first time delving into the world of vue.js, and as expected, I've encountered an error that has me stumped. I recently incorporated the v-md-date-range-picker module into my project: (. The setup instructions provided me with the f ...

javascriptvue.js

React Hook Form – Difficulties with error handling when utilizing multiple forms simultaneously in react hook form version 7.5.2

Previously, in the earlier versions of react hook form, multiple forms could function if another form object was created using the following code: const { register: register2, handleSubmit: handleSubmit2, errors: errors2 } = useForm() H ...

javascriptreactjsformsvalidationreact-hook-form

The code snippets in the Vue3 documentation are quite peculiar

As I peruse the Vue 3 documentation, I notice a recurring pattern in how example code is presented for components: Vue.createApp({}) However, my experience with Vue 3 has been different. Instead of the above syntax, I simply use: <script> export d ...

javascriptnode.jsvue.jsvuejs3

Divs that can be sorted are being shifted downwards within the swim lanes

JavaScript code snippet here... CSS code snippet here... HTML code snippet here... ...

javascripthtmlcss

Smoothly scroll to a specific section on the webpage

I've attempted numerous suggestions from fellow users on stackoverflow, but unfortunately, none of them have yielded successful results for me. Could someone please demonstrate how to animate the scroll to anchors on this particular page? I would grea ...

jqueryhtmlcssscrollto

Display HTML content in a modal dialog box without parsing it

I'm currently working on a website showcasing various HTML and CSS spinners and loaders. Each example opens a modal window upon click, where I aim to display the corresponding code for that spinner so users can easily copy and implement it in their ow ...

jqueryhtmlcssmodal-dialog

How can I dynamically remove the sticky class when scrolling down in an Angular 6 application?

My Angular 6 app has a simple navbar with ng-sticky for a sticky effect on desktop, but I don't want the navbar to be sticky on mobile devices. Here is the HTML code: <div class="main-header"> <nav class="main-nav" ng-sticky [offSet]="0" ...

angularhtmlcssngsticky

Optimizing Bootstrap 4 Flex-Row Dimensions

Issue: I'm currently working on a relatively intricate ListGroup using bootstrap v4. The .flex-row div is displaying some mysterious white space at the bottom, and I need assistance in eliminating it. Attempts Made So Far: I've experimented w ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Titanium: Warning upon initiation

Is it feasible to trigger an alert immediately after a window finishes loading? I am using a create window function followed by an alert message, then returning. function NewView() { var self = Ti.UI.createWindow({}); alert("A basic or confirm al ...

javascripttitaniumappcelerator

Modifying Table Cell Backgrounds Based on Value in React Tables

I am currently utilizing reactstrap to design my table and employing axios to interact with my backend data. The objective is to dynamically change the background color of a cell based on its value. For instance, if the cell value is less than 0.25, it sh ...

cssreactjsreact-tablereactstrap

I am facing an issue where reducing the size of the renderer is causing my click events to be offset. What steps can I

At the moment, my rendered model (which is grey in color) stretches across the entire width of the html page with the mesh centered within that width. I want to reduce this width but when I do so, the click event on the model seems to be misaligned. Three. ...

javascriptthree.js

The requested path /releases/add cannot be located

In my CRUD application, I have a feature that allows users to create releases by adding a version and description. This is achieved through a button and input fields for the details. <button (click)="addRelease(version.value, description.value)" [d ...

javascriptnode.jsangularmongodbexpress

how to assign a value to a field automatically in PHP

Is it possible to send values such as name, email, and contact number from one URL like to another URL at ? I would like these values to be automatically displayed on the form of the target URL (http://www.otherurl.com/test.php). I do not have access to ...

phpjavascriptajax

javascript batch insert new key values

Is there a more elegant way to set multiple keys of an array in JavaScript? The current code may not be aesthetically pleasing, but it seems to be the only solution that works. var listData = []; listData['today'] = []; listData['data1&a ...

javascriptarraysaddition

Sorting an array of strings in JavaScript with the help of another array of strings

I am looking for a way to rearrange array1 based on array2. var array1 = ["cat","dog","mouse","elephant","ant","cow","goat","hen"]; var array2 = ["mouse","cow","goat"]; Expected output: var another_array = ["mouse","cow","goat", "bird"--- then rest of ...

javascriptarrayssorting

How to extract data from Firebase's snapshot.val() using React.js

I have a coding challenge where I need to retrieve the password from the userData object displayed in the console: -MeL7hm5pU3RGhvXnYlR: {name: "wed", password: "wed", userName: "wed"} Here is my code snippet: const Login = ...

javascriptreactjstypescriptfirebasefirebase-realtime-database

What is the best way to enable a child category on a treeview within a Vue component?

I am working with two vue components. The first component (parent component) looks like this: <template> ... <ul class="filter-category" v-for="list in categories"> <list-category :data="list" :category-id="category ...

javascriptvue.jstreeviewvuejs2vue-component

Tips for lining up items in a row

I am struggling to align these boxes next to each other instead of on top of each other. It seems like it should be an easy task, but I just can't seem to make it work. Check out my code here for reference. <body> <div class="horAlign"&g ...

htmlcssalignment