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

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

3 回答

运用

.myclass {
     transition: 0.5s;
 }

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

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

回复于 2024-04-26T14:53:00+08:00

试试这样： 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;  
    }

回复于 2024-04-26T14:53:00+08:00

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

回复于 2024-04-26T14:53:00+08:00

位置变化动画

3 回答

div1 {

相关问题