Animate.css: How to start something in the 'hidden' state?

[JustinWestphal]

Not seeing anything in the docs about this. Animating something IN is great if the object is HIDDEN first... display:none and visibility: hidden aren't doing it, I'd rather not force the element off the screen with absolute positioning... how is this meant to be accomplished?

For example, I have a button and a form. The form is hidden. When the user clicks the button, the button slides out to the right and the form slides in from the left.

[JustinWestphal]

Best solution I could come up with was put everything on top of one another with position:absolute and z-index, and give 'hidden' elements opacity:0.

[asmaulhq]

Add class

SlideInRight ---- for form

SlideOutRight ----- for button

When you click on the button.

Sent from my Sony Xperia

[LordZardeck]

I would like to know this as well. I use javascript to determine when an object is "in view" then I add the slideIn class, to animate it up. The problem with this is that I "jumps" down then slides back in.

[jcdsr]

This work for me.

on your style file or on your head tag add the

your_element { visibility: hidden;}

at the end of your js animation add this:

$('.animated').attr('style', 'visibility: visible !important;');

".animated" need to be overridden as "!important" after your animation is finished

[mbrookes]

This is also a problem for React's <ReactCSSTransitionGroup>.

display: none; / block; fixed it for me:

.zoom-enter {
    display: none;
}

.zoom-enter.zoom-enter-active {
    display: block;
    -webkit-animation-name: zoomIn;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
}

@keyframes zoomIn {
    from {
        opacity: 0.01;
        transform: scale3d(.3, .3, .3);
    }

    50% {
        opacity: 1;
    }
}

.zoom-leave {
    opacity: 1;
}

These are React CSS classNames - React 0.14 will let you specify the classnames to use for <ReactCSSTransitionGroup>, so it will be possible to use Animate.css classnames directly, but you'd still have to edit / override the CSS to get it working for entry animations.