使用CSS3動畫移動圖像

Question

我試圖在屏幕上滑動圖像，然後停留在固定點。我在網上看了一下，發現了一些關於我的東西，但似乎沒有任何工作。

Answer 1

@-webkit-keyframes mini { 
 
    from { 
 
     left:-166px; 
 
    } 
 
} 
 

 

 
.mini { 
 
    background-image: url("http://placehold.it/150x150"); 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 404px; 
 
    width: 166px; 
 
    height: 70px; 
 
    z-index: 7; 
 
    -webkit-animation: mini 2s linear; 
 
}

<div class=mini></div>

或者這樣，如果你沒有overflow: hidden父，避免滾動

@-webkit-keyframes mini { 
 
    from { 
 
     left:0px; 
 
     -webkit-transform: translateX(-166px) 
 
    } 
 
} 
 

 

 
.mini { 
 
    background-image: url("http://placehold.it/150x150"); 
 
    position: absolute; 
 
    top: 10px; 
 
    left: 404px; 
 
    width: 166px; 
 
    height: 70px; 
 
    z-index: 7; 
 
    -webkit-animation: mini 2s linear; 
 
}

<div class=mini></div>

Answer 2

這將讓的最後一幀動畫完成後

animation-fill-mode: forwards; 

@-webkit-keyframes mini { 
 
    from{ 
 
     opacity:0; 
 
    } 
 
    to{ 
 
     opacity:1; 
 
    } 
 
    from { 
 
     left:0px; 
 
    } 
 
    to{ 
 
     left:404px; 
 
    } 
 

 
} 
 

 
.frame1 { 
 
    -webkit-animation: mini 2s normal forwards; 
 
    -moz-animation: mini 30s normal forwards; 
 
    -o-animation: mini 30s normal forwards; 
 
    animation: mini 2s normal forwards; 
 
    opacity:1; 
 
} 
 

 
.mini { 
 
    background-image: url("http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"); 
 
    position: absolute; 
 
    top: 10px; 
 
    left: -404px; 
 
    width: 166px; 
 
    height: 70px; 
 
    z-index: 7; 
 
}

<div class="frame1 mini"> 
 
</div>

Answer 3

看一看這個小提琴。

http://jsfiddle.net/lharby/ysgzpuer/

我在

-webkit-animation: mini 2s normal; 
-moz-animation: mini 3s normal; 
-o-animation: mini 3s normal; 
animation: mini 2s normal; 

傳遞給.mini類動畫股利。

更新：這也有動畫的不透明度：

http://jsfiddle.net/lharby/ysgzpuer/1/

編輯：

@-webkit-keyframes mini { 
from { 
    left:0px; 
    opacity:0; 
} 
to{ 
    left:404px; 
    opacity:1; 
} 

Answer 4

希望這是你在找什麼

的Html

<div class="stage"> 
    <figure class="ball"></figure> 
</div> 

CSS

@keyframes slide { 
    0% { 
    left: 0; 
    top: 0; 
    } 

    100% { 
    left: 488px; 
    top: 0; 
    } 
} 
.stage { 
    background: #eaeaed; 
    border-radius: 6px; 
    height: 150px; 
    position: relative; 
    min-width: 538px; 
} 
.stage:hover .ball { 
    animation-name: slide; 
    animation-duration: 2s; 
    animation-timing-function: ease-in-out; 
    animation-delay: .5s; 
    animation-fill-mode: forwards; 
} 
.stage:active .ball { 
    animation-play-state: paused; 
} 
.ball { 
    background: #2db34a; 
    border-radius: 50%; 
    height: 50px; 
    position: absolute; 
    width: 50px; 
} 

Fiddle Demo