CODEWITHSUNDEEP
jquerycss
dagda1
dagda1

Reputation: 28770

translate jquery animate code into a css3 transition

I have the following jquery code that does what I require:

$("#myele").animate({left: "-120%", height: 0});

How could I translate this code into a css3 transition?

Upvotes: 0

Views: 36

Answers (2)

Travis L
Travis L

Reputation: 681

This should work, given that the object you're animating has an initial height (other than height: auto;) If that's not the case, you could use transform: scale(0); instead of height

@-webkit-keyframes myanimation {
    100% { 
        left: -120%;
        height: 0;
    }
}

@-moz-keyframes myanimation {
    100% { 
        left: -120%;
        height: 0;
    }
}

@-o-keyframes myanimation {
    100% { 
        left: -120%;
        height: 0;
    }
}

@keyframes myanimation {
    100% { 
        left: -120%;
        height: 0;
    }
}

#myele {
    -webkit-animation: myanimation .5s;
    -moz-animation:    myanimation .5s;
    -o-animation:      myanimation .5s;
    animation:         myanimation .5s;
}

Upvotes: 1

g_1_k
g_1_k

Reputation: 489

You can try this but i don't know why css when you have done it this way

#myele:hover{
    left:+="-120%";
    height:0;
}

Upvotes: 1

Related Questions