将jquery动画代码转换为css3转换

Question

我有以下jquery代码可以满足我的要求：

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

我如何将此代码转换为css3过渡？

Answer 1

这应该有效，因为您正在设置动画的对象具有初始高度（height: auto;除外）如果不是这样，您可以使用transform: scale(0);代替高度

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

Answer 2

你可以尝试这个，但是当你这样做时我不知道为什么css

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