Changing the Speed of CSS3 Transitions Dynamically

As I am working with CSS3 Transitions, my current query pertains to initiating the animation with:

-webkit-transform: translate3d(-100%, 0, 0);

Is there a method to augment the predetermined speed set using:

-webkit-transition: all 10s linear;

This time around, I desire the velocity to be 2s by implementing jQuery.

Answer №1

It seems that it is possible using this.style["-webkit-transition"]

Check out this example on jsFiddle

HTML

<div class="one"></div>

CSS

.one
{
    -webkit-transition: all 10s linear;
    width:200px;
    height:20px;
    background:green;
}
.two
{
    -webkit-transform: translate3d(100%, 0, 0);
}

jQuery

$("div").click(function(){
    $(this).toggleClass("two");
    this.style["-webkit-transition"] = "all 2s linear"
});

EDIT

Alternatively,

this.style["-webkit-transition-duration"] = "2s";

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

Top choices for creating animations using THREE.JS

Which animations work best in three.js? Are you using additional libraries like tween.js or something else for texture animations, moving objects, and showing/hiding objects? Thank you. ...

I am unsure of the timestamp format for the value 1522899000000. Can it be used in both Ionic and AngularJS? And how would one go

While parsing a JSON from an external URL, I came across a timestamp with the value starttime: 1522899000000 (on 4/5/2018 -> 5th April 2018). The value seemed like a Unix timestamp, but when I tried to convert it, it displayed the year 1912. What kind o ...

What is the reason for my website page topic being positioned behind the navbar in Bootstrap?

When I click on the navbar, I expect to see the topic displayed beside it, but instead, it is appearing below the navbar. I've tried adding margins, but that hasn't resolved the issue. Can someone help me with finding a solution? This is how my ...

Alter the browser's URI without having to reload the page

Is there a way to change the browser URL (or URI) without refreshing the page using HTML5 and HTML5Shiv for IE? For example, if I am currently on http://www.example.com but want to transition to http://www.example.com/4f6gt without the need for a full pa ...

Merge arrays in map function based on label and aggregate information

In my possession is an array filled with data from various streaming channels, categorized by shift (Morning and Afternoon). I dedicated the night to experimenting with different functions like reduce, but unfortunately, I hit a wall and couldn't gra ...

Having trouble displaying values from nested JSON in a datatable

Response from server : ["{\"CLIENT\":[{\"tranche\":\"1-4\",\"prix\":\"65.96\",\"currency\":\"E\"}],\"DISTRIBUTEUR\":[{\"tranche\":\"1-4\",\"prix\ ...

Manipulating CSS content property in React using Material UI

I am trying to set content: "" on my i element: "& i::before": { content: "" }, "& i::after": { content: "" }, However, the style is not being applied and I am seeing an ...

Navbar Collapse in Bootstrap 5 not functioning properly when losing focus

I am working on a project as a beginner where I am coding a site navbar using Bootstrap 5. The issue I am facing is that currently, the navbar does not collapse when I click away after expanding it. My goal is to make it so that the navbar automatically co ...

Can the state and city be filled in automatically when the zip code is entered?

I have a form where users can enter their zip code, and based on that input, the corresponding city and state will automatically populate. These three fields are positioned next to each other within the same form. Here is an example of my form: $(' ...

Issue with commenting system: Ajax/PHP integration malfunctioning

I am facing an issue with my commenting system. The comments are getting inserted into the database, but they are not showing up immediately after clicking the submit button. I would like them to appear with a sliding effect right after submission. I susp ...

What is the best way to eliminate the gap between header, content, and footer sections when in mobile view?

This issue seems to only occur in mobile mode, where the blueviolet line is coming from the background color. https://i.stack.imgur.com/VBhIp.png link to the image body { background-color: blueviolet; } header, main, footer { background-color: #ff ...

The success of your order hinges on jQuery being defined when using browserify

I encountered an issue while attempting to utilize a plugin located in /js/lib/stellar.jquery.js: var $ = require('jquery'); require('./lib/stellar.jquery') $(function(){ $.stellar(); }); Upon running the code, I received an err ...

Ensure the placeholder remains front and center, growing in size as it moves vertically

.inpsearch{ border:2px solid #bbb; border-radius:14px; height:29px; padding:0 9px; } .inpsearch::-webkit-input-placeholder { color: #ccc; font-family:arial; font-size:20px; } <input type='search' class='inpsea ...

Implement real-time reporting functionality in Selenium

I have been working on implementing a run-time reporting mechanism for my automated test cases created using Java with Selenium and TestNG. The test results and details are stored in a MySQL database. Although I can successfully insert the test results in ...

Looking to align the labels of material UI tabs to the left instead of their default center alignment? Here's how

Is there a way to align material ui tab labels to the left instead of center by default? View an image demonstrating center aligned tab labels here ...

What is the best way to create a "comment posting and replying" section on a website using either PHP or Javascript?

I'm currently in the process of developing my own personal website. I believe that incorporating a section for "user comments and replies" would be a great way to enhance my site. I prefer to avoid user email verification. I'd like users to be a ...

Is it better to deploy a JS app to the browser, or should I consider using nw.js

Is there a tool available for developing a javascript application that can be deployed as either a browser-based or native app using nwjs or Atom Electron? It should only utilize browser-compatible features and not node's native features. Maybe th ...

Issue with passing the ID of an HTML select dropdown to a JavaScript function where the value returned by getElementById is null

Hey everyone, I'm new to this and I'm trying to showcase the benefits of client-side rest operations to my team. They are more used to working with scripts and python. I'm not sure if the issue lies with the fact that I'm using numbers ...

Exploring the concept of inheritance in JavaScript and Angular programming

Currently, I am working on a project called "hello world" and it involves two HTML pages named "configuration.html" and "add configuration.html". Each page has its own controller defined as follows: angular.module('MissionControlApp').controller ...

Tips to prevent the return of undefined when a condition is not satisfied

I'm currently working on a react app and I have an array of objects (items) that I want to iterate over in order to display each object based on its index. I am using useState to set the index, which is updated when the user clicks a button. const ...