Issue with transition not functioning properly on a rotated CSS3 element

Having a bit of trouble with my CSS class:

.rotate
{
  -webkit-transition: all 2s ease-in-out;
  -webkit-transform : rotateY(360deg);
}

When I change the rotation to 180deg and apply the class using jQuery, the div rotates instantly instead of over a 2 second period. It seems like the transition effect is not being applied, only the transform.

Any suggestions on how to fix this?

Thanks in advance!

- JD

Additional Info:

After some testing, it appears that applying the class works properly when triggered by a click event.

I'm using a plugin that handles animations, where users can specify their own animations at the start. The plugin stores a list of div elements in an array and cycles through them every 5 seconds by inserting each one into the DOM tree (and removing the existing one). I expected the transition to occur when the first div is added. Here's how I'm using the plugin:

      $.jqTests.start({ cyclespeed : 5secs;
                        transitionanimationin : 
                           function(element) {
                           element.removeClass('non-active'); 
                           // display : none is removed.
                           element.addClass('rotate');}
                     });

I've noticed that using CSS3 keyframe animations work correctly, but I'm unable to get the transition to work effectively using transforms.

Answer №1

-webkit-transition-duration: 2s;

Experiment with this in CS3, that code is meant for HTML styling purposes.

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

Move the button to the following line and center it. Ensure that the background image remains at full size

.home{ background-image:url("https://cdn.pixabay.com/photo/2016/12/27/21/03/lone-tree-1934897_960_720.jpg"); background-repeat: no-repeat; height: 100vh; display: flex; align-items: center; justify-content: center; } .hero-text{ fon ...

Is the primary color modification in Bootstrap failing to take effect?

Currently, I am working on a react app and I have successfully integrated Bootstrap React. One of the tasks I wanted to accomplish was changing the primary color from the default blue to a different shade. To do this, I navigated to bootstrap/scss/variabl ...

Showing content from a text file inside a Bootstrap modal

I have encountered an issue with my modal on the main page. I used jQuery to retrieve data from a text file, and while I can successfully console log the data, the field in the modal appears blank once opened. Any idea why this is happening? Below is the ...

Troubleshooting issue: `will_paginate` and jQuery integration not functioning properly due to non-responsive

I'm currently implementing a pagination feature in my application using jQuery, similar to how it's done on platforms like Facebook and Twitter. However, when I try to load "next" results, the entire HTML page is being loaded instead. It seems li ...

What is the best way to retrieve the output from an Ajax request when there are two outputs - one for a PHP echo and another for the Ajax

After successfully fetching the data from the database, I encountered an issue. I want to use Ajax requests to display the results. The problem arises when the results/output are displayed twice. Specifically, the *first output is displayed through Ajax (a ...

Adding an additional border when combining two divs with rounded borders

I attempted to create a design similar to the Instagram "ask me a question" box, but I am encountering an issue where there is some extra border around the title when the two divs merge. What am I doing incorrectly? .info { overflow: hidden; ...

What is the best way to enhance the capabilities of a current tinyMCE button?

I am interested in enhancing the capabilities of the default buttons in tinyMCE by adding additional functionality. I'm curious to know how this can be achieved. For instance, If I would like the paste button not only to paste content, but also perf ...

Resizing Images with 'fitin' Attribute in HTML

When I upload images to my shop's site on Rakuten, the platform requires them to be 128px in size. However, my shop uses 255px for every image. The uploaded images are named like this: "xxx.jpg?fitin=128:128". I changed the size to 255px, but now the ...

The keyup event fails to trigger for the search input in datatables when ajax is being used

When loading a page with a jQuery datatable via AJAX, I am aiming to implement custom filtering when the user starts typing in the default filter provided by datatables. The custom logic needs to be applied when the keyup event is triggered. Since AJAX is ...

Wait for two seconds after releasing a key before taking action

I am aiming to optimize my ajax calls by only sending one after the user has finished typing a keyword, such as "stackoverflow," without repeatedly sending requests with every key press. I am attempting to implement a system where an ajax call is triggered ...

Managing mouse click events in jQuery

Here on SO, I successfully implemented the mouse down handler. Now, my goal is to separate these functions into their own file named test.js. Within test.js, the code looks like this: function handleMouseDown(e) { console.log('handleMouseDown&ap ...

Should I consider using an UI framework when initiating a React project?

I'm embarking on a new website project and I'm contemplating whether using a React UI Framework is the way to go, or if I should create my own components and grid system from scratch. I've been drawn to projects like ElementalUI's take ...

Transfer information from a Json file to the Parse.com backend using the Rest API

Good evening everyone, I'm facing a challenge in loading data from a .json file into the Parse.com backend. While I successfully managed to manually add json data using the terminal on my Mac by following the example provided by Parse.com: curl -X P ...

What could be causing the hover effect to not work on other elements within the div?

I am working on creating a card that displays only the image when not hovered, but expands and reveals additional information in a div to the right of the image when hovered. Unfortunately, when I hover over the image and then move towards the adjacent div ...

Using Stringify to modify the value of a particular array in Local Storage

Uncertain of the accuracy of my question, but I am attempting to modify a value within a localstorage array. This is what my localstorage currently contains: [{"id":"item-1","href":"google.com","icon":"google.com"}, {"id":"item-2","href":"youtube.com","i ...

`Jump-start Your Development with jQuery Lightbox Centering`

Recently, I implemented a lightbox effect for images on my website. However, I encountered an issue where the lightbox was not centering properly in the window upon initial click. Instead, the lightbox would appear at the bottom of the page on the first cl ...

I am experiencing issues with the jQuery function within my MVC Application

When working on my MVC application, I encountered an issue where the onclick function was not functioning as expected. @section Scripts{ <script src="~/Scripts/plugins/toastr/toastr.min.js"></script> <script> $(document). ...

Issue with Drag and Resize function not functioning properly in Chrome browser

Having trouble getting resizable and draggable to work together on an image in Chrome. On my page, there's a list of draggable images that can be dropped onto a div (cloned). The dropped images should be both resizable and draggable. My JavaScript cod ...

The default setting for the Baraja plugin is to load with the deck already open

Currently, I am developing a plugin known as Baraja which is designed for spreading items in a card-like manner. I am facing an issue with the code and unable to determine how to set the plugin to load the cards in "Rotated spread (horizontal)" fashion by ...

Determine the difference between a CSS selector string and an XPath string

Developing a compact querying module (using js) for html is my current project, and I aim to create a versatile query(selector) function that can handle both css selectors and XPath selectors in string form. My dilemma lies in determining whether a given ...