CSS3 Transitions instead of jQuery

Question

I have some divs as follows.

<body>
    <div class="main">
        <div class="page1 active">
            <p>Page1</p>
            <button id="btn-about">Page2</button>
        </div>
        <div class="page2">
            <p>Page2</p>
        </div>
    </div>
</body>

The pages are hidden by default unless they have the active class. To display a new page, I remove all active classes within the div which has class main and then add the active class to the page I want, for e.g page 2.

With something like this

$("#btn-about").click(

    function(e) {
       e.preventDefault();
       $(".main div").removeClass("active");
       $(".main .page-2").addClass("active");

    }

);

And then it becomes something like this:

<div class="page2 active">
    <p>Page2</p>
</div>

It works fine but now I want, using CSS3, to hide or show the pages with certain effects. Sliding Up, Sliding Down, Sliding Left, Sliding Right or Fades.

I am a newbie regarding CSS3 and would appreciate all the help.

Here are some examples for inspiration: justinaguilar.com/animations — pawel
– pawel, Commented Sep 24, 2013 at 12:55

ZhaoYiLi · Accepted Answer · 2013-09-24 18:18:53Z

1

For CSS animations you can use the transition: style, for a sequence of transitions combine it with transition-delay:

Here are some good places to start researching:

And this tutorial has the transitions you mentioned:

http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/
Demo: Sliding in from top (http://tympanus.net/Tutorials/CSS3PageTransitions/index.html#home)
Demo: Fading in/out (http://tympanus.net/Tutorials/CSS3PageTransitions/index2.html#portfolio)
Demo: Sliding in from side (http://tympanus.net/Tutorials/CSS3PageTransitions/index3.html#portfolio)

answered Sep 24, 2013 at 18:18

ZhaoYiLi

1731 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LFI · Accepted Answer · 2013-09-24 13:13:38Z

0

I think you can look at

Effeckt.css, which is a great project from the html5-boilerplate team. But as they say "Work in Progress! Not quite ready for prime-time"
Animate.css which is more production ready but less ambitious

answered Sep 24, 2013 at 13:13

LFI

6545 silver badges11 bronze badges

Collectives™ on Stack Overflow

CSS3 Transitions instead of jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related