div1 {

Question

我有div元素，我想从左边动画它的CSS相对位置：-260px;左：-130px;我把鼠标放在它上面超过0.5秒，只要我的鼠标在那个div上，我希望它留在那里。比我想要将它设置回原来当我将鼠标移出div时的位置。

我阅读了大量有关css关键帧动画的教程，我感到非常困惑。我想要一些非常简单的东西只需简化持续0.5秒的动画即可我怎么能用css或CSS + JavaScript（没有jQuery）呢？

Answer 1

使用

 .myclass {
     transition: 0.5s;
 }

 .myclass:hover {
      /* add relevant vendor prefixes */
      transform: translateX(130px);
      transition: 0.5s;
 }

编辑：概念证明：http://codepen.io/Theodeus/pen/oXWEYx

Answer 2

请尝试以下操作： Demo

的CSS：

ul li{ 
    padding-left:260px;      
    -moz-transition: padding-left .3s ease;
     -o-transition: padding-left  .3s ease;
     -webkit-transition: padding-left  .3s ease;
     transition: padding-left  .3s ease;
    display:block;
    }

ul li:hover{
    padding-left: 130px;  
    }

Answer 3

div1 {

    transition-property: transform;                
    animation: example 5s infinite linear;

}

  @keyframes example                 
            {
        100%{-web-kit-transform:translate X(0px);}            
          0%{-web-kit-transform:translate X(150px);}
   }

位置变化动画

3 个答案:

div1 {