css - 仅使用 CSS 动画位置

标签 css

悬停时我有以下样式:

li:hover a {
    left: 65px;
}

我知道我可以用 jQuery 制作动画,但它可以单独用 CSS3 制作动画吗?

没有工作:

li:hover a {
    left: 65px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

最佳答案

你必须使用这个 css:

li:hover { 

    left: 0px;

}

li:hover a {

    left: 65px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

关于css - 仅使用 CSS 动画位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23460967/

相关文章:

CSS Transform - 保持悬停状态的值(value)

html - 向左水平滚动

asp.net - 使用 CSS 的平面 DropDownList

jquery - 为什么文本在动画中使用而不是静态时不清晰

html - 并排对齐两个 anchor

javascript - 将鼠标悬停在单词上时,Reactjs 下拉菜单不显示

html - 页脚中的文本不会正确对齐

jquery - 使用 Masonry 的响应式图片库

css - 使用 z-index 的 div 空间

html - 在 Bootstrap 中隐藏 vimeo 播放栏