hoạt ảnh css3 giữ nguyên trạng thái ban đầu

Question

Phát xung quanh bằng hoạt ảnh CSS 3 nhưng vì một số lý do, tất cả hoạt ảnh sẽ trở về trạng thái ban đầu sau khi thực thi.

Trong trường hợp này, tôi muốn hình ảnh ở lại scale(1) sau khi hoạt ảnh và văn bản của tôi để oly xuất hiện sau khi hoạt ảnh img nhưng ở lại sau đó.

.expanding-spinning { 
    -webkit-transform: scale(.4); 
    -webkit-transition-timing-function: ease-out; 
    -webkit-transition-duration: 500ms; 
    animation-duration: 500ms; 
} 

.expanding-spinning { 
    -webkit-animation: spin2 1.4s ease-in-out alternate; 
    animation: spin2 1.4s ease-in-out alternate; 
    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
} 

@-webkit-keyframes spin2 { 
    0% { -webkit-transform: rotate(0deg) scale(.4);} 
    100% { -webkit-transform: rotate(360deg) scale(1);} 
} 
@-keyframes spin2 { 
    0% { transform: rotate(0deg) scale(.4);} 
    100% { transform: rotate(360deg) scale(1);} 
} 

@-webkit-keyframes fadeInFromNone { 
    0% { 
    display:none; 
    opacity: 0; 
    } 

    100% { 
    display: block; 
    opacity: 1; 
    } 
} 

.slogan { 
    display: block; 
    opacity: 1; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-name: fadeInFromNone; 
    -webkit-animation-delay: 3.5s; 
} 

Fiddle code

Answer 1

Bạn cần phải thêm các quy tắc -webkit-animation-fill-mode: forwards; để hình ảnh động của bạn.

Ngoài ra, liên quan đến hoạt hình văn bản: Animate các visibility tài sản thay vì display tài sản

FIDDLE

.expanding-spinning { 
    -webkit-animation: spin2 1.4s ease-in-out; 
    -moz-animation: spin2 1.4s linear normal; 
    -o-animation: spin2 1.4s linear; 
    -ms-animation: spin2 1.4s linear; 
    animation: spin2 1.4s ease-in-out alternate; 
    -webkit-animation-delay: 2s; 
    animation-delay: 2s; 
    -webkit-animation-fill-mode: forwards; /* <--- */ 
} 
@-webkit-keyframes fadeInFromNone { 
    0% { 
     visibility:hidden; 
     opacity: 0; 
    } 

    100% { 
     visibility: visible; 
     opacity: 1; 
    } 
} 

.slogan { 
    visibility:hidden; 
    opacity: 1; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-name: fadeInFromNone; 
    -webkit-animation-delay: 3.4s; 
    -webkit-animation-fill-mode: forwards; /* <--- */ 
} 

Xem this article cho một lời giải thích tốt đẹp của tất cả các thuộc tính hình ảnh động

Chế độ điền. Nếu thiết lập để chuyển tiếp, các keyframe cuối cùng vẫn còn ở cuối của phim hoạt hình,

(từ trên cao liên kết)