Play CSS animation on hover, pause on hover out

Question

Tôi'm trying để

• PLAY animation on hover.
• Tạm dừng hoạt ảnh khi di chuột ra ngoài (tức là không quay lại khung 0).

Không thể sử dụng -webkit-animation-play-state: paused; trên div phụ huynh?

Xem một example here, khi bạn di chuột ra nó đi trở lại khung 0.

Tôi không muốn sử dụng JS.

Answer 1

example jsfiddle

thiết lập các hình ảnh động trên #tech với trạng thái chơi dừng lại

#tech { 
    -webkit-animation-play-state:paused; 
    -webkit-animation: moveSlideshow 10s linear infinite; 
} 

sau đó thay đổi play-nhà nước để chạy trên di chuột

#tech:hover{ 
    -webkit-animation-play-state:running; 
} 

Answer 2

Kiểm tra JSFiddle đây: http://jsfiddle.net/fRzwS/373/.

Hoạt ảnh không dừng vì định nghĩa muộn của animation ghi đè giá trị của thuộc tính animation-play-state. Theo W3C specification, animation:

The 'animation' shorthand property is a comma-separated list of 
    animation definitions, each of which combines seven of 
    the animation properties into a single component value. 

Và số bảy thuộc tính là:

<single-animation> = <single-animation-name> || <time> 
    || <single-animation-timing-function> 
    || <time> || <single-animation-iteration-count> || <single-animation-direction> 
    || <single-animation-fill-mode> || <single-animation-play-state> 

Nó tương tự như các thuộc tính background và background-color.

Vì vậy, trong mã gốc:

#tech { 
    -webkit-animation-play-state: paused; 
    -webkit-animation: moveSlideshow 10s linear infinite; 
} 

tài sản animation-play-state được thiết lập để được paused. Tuy nhiên, thuộc tính muộn animation OVERWRITES giá trị này theo giá trị mặc định running. Vì vậy, bạn có thể xác định tài sản animation-play-state sau (http://jsfiddle.net/fRzwS/373/):

#tech { 
    -webkit-animation: moveSlideshow 10s linear infinite; 
    -webkit-animation-play-state:paused; 
} 

Hoặc bạn chỉ có thể sử dụng (http://jsfiddle.net/fRzwS/374/):

-webkit-animation: moveSlideshow 10s linear infinite paused; 

---

Dưới đây là một ví dụ khác mà hoạt động trên cả Chrome và Firefox: http://jsfiddle.net/MaY5A/694/

Answer 3

Tôi không có đủ danh tiếng để nhận xét các câu trả lời khác. Tốt. Cách của @MikeM hoạt động nhưng anh ấy đã làm một sai lầm nhỏ. Hãy xem:

#tech { 
    -webkit-animation-play-state:paused; 
    -webkit-animation: moveSlideshow 10s linear infinite; 
} 

Điều này không có tác dụng và điều này không hoạt động. Ghi chú tốc ký hoạt ảnh ghi đè animation-play-state.Bạn cần sắp xếp lại các chuỗi để làm cho nó làm việc

Answer 4

tôi đang tìm kiếm này là tốt, và @MikeM câu trả lời của đã cho tôi nơi tôi cần phải đi, và với @HellGate 's bình luận về câu trả lời đó liên quan đến Chrome:

bạn cần trạng thái tạm dừng sau khi các hình ảnh động khác nó không hoạt động

tôi đã quan tâm đến việc làm thế nào để tạm dừng hình ảnh động trên một tờ ma PNG khi nó được hoạt động, và tiếp tục/resume trên di chuột, vì vậy câu trả lời được chấp nhận đã giúp trong vấn đề đó. Dưới đây là một bản demo cho thấy làm thế nào điều này có thể được thực hiện trên một PNG Sprite Sheet (tín dụng cho sprite, và CSS gốc đi đến Guil Hernandez và bài đăng blog tuyệt vời của mình here): CodePen.

Các bộ phận CSS quan trọng:

.monster { 
    width: 190px; 
    height: 240px; 
    margin: 2% auto; 
    background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center; 
    -webkit-animation: monsterAnimation .8s steps(10) infinite; 
    animation: monsterAnimation .8s steps(10) infinite; 
    -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */ 
    animation-play-state: paused; 
} 

.monster:hover { 
    -webkit-animation-play-state: running; 
    animation-play-state: running; 
} 

@keyframes monsterAnimation { 
    100% { background-position: -1900px; } 
}