Is it possible to combine numerous -webkit-transition animations in my css code without using keyframes?

I'm experimenting with chaining multiple -webkit-transition animations in my CSS without using keyframes.

I understand it's possible to achieve this by calling a keyframe animation, but I prefer to simply overwrite the properties. However, for some reason, the JavaScript code below isn't working as expected:

var firstTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 1 }
var secondTransition = { '-webkit-transition': 'opacity 1000ms ease-in 1000ms', 'opacity': 0 }

$('theDiv').setStyles(firstTransition)

changeColor.delay(3000);

function changeColor(){

    $('theDiv').setStyles(secondTransition);
}

You can view the demo on this Fiddle: http://jsfiddle.net/a2co/Tn9mT/25/

Answer №1

The element in your code on fiddle is set to have a visibility: hidden as well. It appears that jQuery is attempting to make adjustments automatically. Consider changing the value from 0 to 0.01.

Answer №2

One way to approach this situation in a more organized manner is by utilizing a library like jQuery Transit. This framework makes it easier to manage sequences and callbacks that are associated with CSS3 animations:

Here's an example using Javascript:

    $('#theDiv').transition({opacity: 1}, 1000, 'in', function () { 
         //Callback
         $(this).transition({opacity: 0, delay: 3000}); });

Check out the JS Fiddle Demo

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

Struggling with aligning two divs side by side on an HTML page

Recently, I've been experimenting with Electron and attempting to create 2 divs side by side. Despite trying various alignment options found here, nothing seems to be working for me. Here's the code I have so far: Code body, html { hei ...

D3 Treemap for handling extensive sets of data

I am uncertain if there exists a method to incorporate the desired feature. I am seeking a solution similar to zoomable treemaps, but to initially load a limited number of child levels and then dynamically add more child nodes without requiring a node clic ...

CSS: The enigma of :nth-child - what eludes my understanding?

I have 2 divs which are similar to 2 td's in a table. My goal is to have 2 red divs, followed by 2 blue divs and so on. However, my current code doesn't seem to be working. Can someone point out what I am missing: <style> .irow :nth-child( ...

Creating consistent height for elements in different columns using Bootstrap 5

I'm struggling with keeping the ".item" elements equal height in different columns. Does anyone have a solution for this? <div class="container"> <div class="row"> <div class="col-8"> <h3& ...

Using Flexbox to center items is leading to content overlapping

After attempting to utilize flexbox for centering items, I am encountering issues with content overlapping and misalignment. Link to the code snippet .footer_3 { position: relative; display: flex; align-items: top; justify-content: center; top: ...

What could be the reason that my for loop executes only when it is embedded within a while loop?

Hey there, I've been trying to understand why this code snippet works when the while loop is included: some = 0 n = 5 while some == 0: for title in itertools.islice(driver.find_elements_by_css_selector("a[class='link-title']"), ...

Clicking on an absolute HTML element will instantly scroll back to the top of the page

Working on a website, I've designed a custom menu that is hidden with 0 opacity and z-index -1. When a button is clicked, the menu will appear on the screen. You can visit to see the site in action. The issue I'm facing is that every time I cl ...

Adjusting the background color of the custom input range thumb when the input is disabled

I've customized the input thumb on my range slider, and I'm looking to change its color when it's disabled. I attempted adding a class to the thumb like this: input[type=range]::-webkit-slider-thumb.disabled and also tried adding the disa ...

Creating a drop-down menu that aligns perfectly under the bar in Material-UI: What you need to know

While working with Material-UI, I encountered a problem with my drop-down menu. Every time I click on it, it covers the bar instead of appearing below it (see image links below). https://i.stack.imgur.com/1Y8CL.jpg https://i.stack.imgur.com/emf87.jpg Is ...

Two elements failing to display side by side

Can someone help me figure out how to align the quantity and Add-to-cart button on the same line? The quantity is displaying as a block element even though I set it as inline... any suggestions would be appreciated! Visit this link for reference. I' ...

Dissipating visuals / Effortless website navigation

Do you have experience working with HTML or are you looking for specific code examples? I've noticed some websites with sliders that feature clickable images fading in as soon as the page loads. I tried searching for information on how to achieve thi ...

Tips for customizing the CSS styling of the validation ng-class error

Seeking advice: Is there a way to customize the CSS style of the 'error' validation error for ng-class in Bootstrap v3? This is my current code: ng-class="(form.datos.$invalid) && ( form.datos.$touched || submitted) ? 'error&apos ...

Enhance the appearance of the input range by styling it with an additional class both before and

I have a JSF page where I am using an input range element. I want to add a different style class before and after the input range. Specifically, I want to display a plus icon (ui-icon-plusthick) before the input and a minus icon (ui-icon-minus) after the i ...

clear background with logo embossed

I have encountered an issue while trying to place my logo on a black background with transparency. Instead of the background being transparent, now my logo is also becoming transparent which was not my intention. Does anyone have any suggestions or ideas ...

What are the steps to reveal the second element once the first one has vanished?

Is there a way to delay the appearance of the second square until after the first square has disappeared? For example, I want the first square to appear after 3 seconds and then disappear, followed by the second square becoming visible after 11 seconds. ...

Breaking the layout using recursive components in VueJS

I am currently facing an issue where I need to dynamically load components. However, when some of these components are loaded, they appear with faulty or missing CSS styles due to a problematic first div element after the template. Removing this DIV manual ...

Changing color of entire SVG image: a step-by-step guide

Check out this SVG image I found: https://jsfiddle.net/hey0qvgk/3/ <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" width="90" height="9 ...

Is It Possible for an HTML Page to Load Within an iframe?

Recently, I embedded an iframe link from a game hosted on Scirra onto my website. However, I noticed that the page automatically scrolls down to where the iframe is positioned once opened, which is quite annoying. Does anyone know how to resolve this iss ...

Issues with Media Query in Mobile Device Footer not Resolving

Despite searching through numerous pages on Stack, I have not been able to find a solution. I am attempting to remove the footer on mobile devices using a media query. Unfortunately, it does not seem to be effective on the device, although it works when th ...

Adding color dynamically to text within ion-card based on a regex pattern

My goal is to enhance the appearance of certain text elements by wrapping them in a span tag whenever a # or a @ symbol is detected, creating the look of usernames and hashtags on Twitter. Below is the code I am currently using: TS FILE: ngOnInit(): void ...