Chỉ chạy hoạt ảnh CSS3 một lần (khi tải trang)

Question

Tôi đang tạo một trang đích đơn giản được điều khiển bởi CSS3. Để làm cho nó trông tuyệt vời có một <a> nhúng cả lên:

@keyframes splash { 
    from { 
     opacity: 0; 
     transform: scale(0, 0); 
    } 
    50% { 
     opacity: 1; 
     transform: scale(1.1, 1.1); 
    } 
    to { 
     transform: scale(1, 1); 
    } 
} 

Và để làm cho nó thậm chí còn tuyệt vời hơn tôi đã thêm một hình ảnh động di chuột:

@keyframes hover { 
    from { 
     transform: scale(1, 1); 
    } 
    to { 
     transform: scale(1.1, 1.1); 
    } 
} 

Nhưng có đến vấn đề! Tôi giao các hình ảnh động như thế này:

a { 
    /* Some basic styling here */ 

    animation: splash 1s normal forwards ease-in-out; 
} 
a:hover { 
    animation: hover 1s infinite alternate ease-in-out; 
} 

Tất cả mọi thứ làm việc tốt: Các bắn <a> vào người dùng phải đối mặt và có một sự rung động đẹp khi dao động nó. Bit ngay sau khi người dùng làm mờ số <a> công cụ mượt mà kết thúc đột ngột và <a> lặp lại splash -animation. (Đó là hợp lý với tôi, nhưng tôi không muốn nó) Có cách nào để giải quyết vấn đề này mà không cần một số lớp học JavaScript Jiggery Pokery không?

Answer 1

Sau giờ googling: Không, không thể không có JavaScript. animation-iteration-count: 1; được lưu nội bộ trong thuộc tính shothand animation, được được đặt lại và ghi đè trên :hover. Khi chúng tôi làm mờ số <a> và giải phóng :hover lớp cũ reapplies và do đó lại đặt lại thuộc tính animation.

Thật đáng buồn là không có cách nào để lưu một trạng thái thuộc tính nhất định trên các trạng thái phần tử.

Bạn sẽ phải sử dụng JavaScript.

Answer 2

Nếu tôi hiểu đúng mà bạn muốn xem hiệu ứng động trên A chỉ một lần youu phải thêm

animation-iteration-count: 1 

với phong cách cho a.

Answer 3

Nó có thể được thực hiện với một chút chi phí phụ.

Chỉ cần quấn liên kết của bạn vào div và tách hoạt ảnh.

html ..

<div class="animateOnce"> 
    <a class="animateOnHover">me!</a> 
</div> 

.. và css ..

.animateOnce { 
    animation: splash 1s normal forwards ease-in-out; 
} 

.animateOnHover:hover { 
    animation: hover 1s infinite alternate ease-in-out; 
} 

Answer 4

Tôi chỉ có này làm việc trên Firefox và Chrome. Bạn chỉ cần thêm/xóa lớp bên dưới cho phù hợp với nhu cầu của mình.

.animateOnce { 
    -webkit-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
    -moz-animation: NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
    -o-animation:  NAME-OF-YOUR-ANIMATION 0.5s normal forwards; 
}