Put a pause on CSS3 animations

Question

Put a pause on CSS3 animations

I have created a unique CSS3 menu item and I am looking to showcase the articles item in a special way: By clicking on the 4th item, it should display the first one, followed by the second one, then the third with a slight delay of 0.5 seconds between them. Similarly, clicking on the 2nd item should bring up the first one and then the second after a short delay. The effect should be nice and smooth :) However, the current version is not exactly what I had in mind. You can view the live version here: http://jsfiddle.net/vH4DV/4/

Do you think this can be achieved using CSS3 alone, or should I incorporate JQuery for this? Your help is greatly appreciated!

EDIT

Update: I have managed to achieve the desired effect. You can view the final live version here: http://jsfiddle.net/vH4DV/21/

jquery css css-transitions

Answer 1

Answer №1

http://jsfiddle.net/derekstory/vH4DV/19/

Instead of:

   .ac-container input:checked ~ article{  
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    }

Be more specific for your transitions.

.ac-container input:checked ~ .how{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
    opacity:1;
}

.ac-container input:checked ~ .About{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
}
.ac-container input:checked ~ .references{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .6s;
    -webkit-transition-delay: .6s;
}
.ac-container input:checked ~ .contact{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .9s;
    -webkit-transition-delay: .9s;
}

Answer 2

http://jsfiddle.net/derekstory/vH4DV/19/

Instead of:

   .ac-container input:checked ~ article{  
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    }

Be more specific for your transitions.

.ac-container input:checked ~ .how{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
    opacity:1;
}

.ac-container input:checked ~ .About{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
}
.ac-container input:checked ~ .references{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .6s;
    -webkit-transition-delay: .6s;
}
.ac-container input:checked ~ .contact{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .9s;
    -webkit-transition-delay: .9s;
}

Put a pause on CSS3 animations

EDIT

Answer №1

Similar questions

Embed a partial view within a Jquery modal dialogue box featuring two distinct models

Enhance user experience by implementing an autocomplete feature for a text input field

Transmitting information following successful password verification

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not

Utilizing Jquery's each() method to retrieve the exact position of a specific class element

I require assistance in consolidating multiple arrays retrieved from a JSONP request into a single unified array

Adjust the width of a container as its children expand

Could someone please provide guidance on customizing the appearance of bs5-lightbox?

Combining jQuery functions for a smooth user experience: fadeOut, live, and delay all working together in a div fade

Working with arrays of multiple checkboxes in jQuery

Is there a way to merge all this data into a single Object?

Code written in Javascript runs before any CSS files are downloaded and processed

Ways to automatically refresh a page without losing the current content within a div every minute

Remove a div element from a slider without permanently deleting or removing the div element from the DOM

What is preventing the control from being passed back from the PHP file to the AJAX success function?

How can I locate an element within the body of an if statement?

Button placement that feels out of place

Display a clock showing the Central Standard Time (CST) on an HTML webpage using

Choose the initial full text that corresponds with a portion of the text

Can an event be initiated on dynamically loaded iframe content within a document using the jQuery "on" method?