JS-initiated CSS3 Animations with jQuery Fallback

Posted on 2012-08-20
Medium Priority
Last Modified: 2012-09-03
Hi Experts!

I need some help with CSS3 animations.  I want to create a simple slideUp/Down animation as per jquery's .slideUp() and slideDown() methods.

Its for a mobile accordion widget.

I know how to create the JQ fallback, and to handle the rest of the accordion, what I need a hand with is:

1) How to setup the CSS3 animation for sliding an element into / out of view
2) How to initiate this from javascript.

Is it a simple case of assigning a class that has the transition CSS set on it?

Im not very familiar with CSS3 animations..


Question by:Barry Jones
  • 2
  • 2
LVL 19

Accepted Solution

Bardobrave earned 2000 total points
ID: 38315617
Here you have a good tutorial on CSS3 animation.

I hope it helps you:
LVL 12

Author Comment

by:Barry Jones
ID: 38323845
Hi Bardobrave

Thanks for your post - I've just gone on a weeks holiday, and will get back to this in 1 week ok?

Thanks, TheFoot
LVL 19

Expert Comment

ID: 38323915
That's fine. Enjoy your vacation time!
LVL 12

Author Closing Comment

by:Barry Jones
ID: 38360417
Sorry for the delay - thanks for the link - perfect!

Cheers, TheFoot

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question