translate jquery animate code into a css3 transition

Question

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?

your code wouldn't work, this one might $("#myele").animate ({left: "-120%", height: 0},duration) — Amin Jafari
– Amin Jafari, Commented Jun 19, 2014 at 13:49

g_1_k · Accepted Answer · 2014-06-19 14:05:30Z

1

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

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

answered Jun 19, 2014 at 14:05

g_1_k

4891 gold badge6 silver badges13 bronze badges

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

1 Comment

lukkysam Over a year ago

are you using less? this is not pure css.

Travis L · Accepted Answer · 2014-06-19 14:09:30Z

1

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;
}

answered Jun 19, 2014 at 14:09

Travis L

6812 gold badges7 silver badges12 bronze badges

Collectives™ on Stack Overflow

translate jquery animate code into a css3 transition

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related