CODEWITHSUNDEEP
jquerycssdelay
I_love_pugs
I_love_pugs

Reputation: 103

How to make object hidden to start its animation?

I wrote an animation and then I implemented and delayed it into my html code via jquery. But then i realized that animation doesn't go smoothly (it's from the very biginning then dissapears and then comes to the screen corectly). I want to make this object hidden for 1,25s and then start with the animation at the same time. I have some trouble with displaying my code on this site (stack overflow), sorry for that.

JS:

<script>
setTimeout( function(){
$('#myobject').addClass('animated bounceInLeft');
}, 1250)
</script>

CSS: ` 

 @-webkit-keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355,1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
    }

    60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
    }

    75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    }

    90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
    }

    to {
    -webkit-transform: none;
    transform: none;
    }
    }
    @keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
    }

    60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
    }

    75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    }

    90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
    }

    to {
    -webkit-transform: none;
    transform: none;
    }
    }

    .bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    }

`

Upvotes: 0

Views: 53

Answers (1)

Chiller
Chiller

Reputation: 9738

you should add opacity:0; to your object

this way it will not show untill the animation starts

#myobject{
   opacity:0;
}

Add another class with opacity:1; and make it important:

.visible{

  opacity:1!important;
}

and add it in your script with the other classes

setTimeout( function(){
$('#myobject').addClass('animated bounceInLeft visible');
}, 1250)

This will make it stay visible after the end of the animation.

Working demo

Upvotes: 1

Related Questions