位置變更動畫

Question

我有div元素，我想從左開始動畫其CSS相對位置：-260px; 向左：-130px； 當我將鼠標懸停在它上面超過0.5s時，只要鼠標懸停在該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

嘗試這樣： 演示

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