IE - Hoạt ảnh CSS nhảy trở lại ở cuối hoạt ảnh

Question

Tôi đang cố gắng đưa div vào animate ở trung tâm của trang mà không cần di chuyển xung quanh. Div được cho là mở rộng lên xuống trong khi xoay (vô hạn), tất cả trong khi nó nằm ở một vị trí ở giữa trang. Nó thực hiện điều này tốt trong Firefox và Chrome, nhưng trong IE11 div bắt đầu ở đầu trang và sau đó làm động đến nơi cần. Khi hoạt ảnh hoàn tất, div nhảy trở lại lên trên cùng và bắt đầu lại.

Đây là số JSFiddle minh họa điều này. Vui lòng xem nó trong cả Chrome và IE để xem độ tương phản.

Đây là mã:

@keyframes logosplash { 
     0% {transform: translateY(50vh) scale(1.25) rotateZ(-45deg);} 
    50% {transform: translateY(50vh) scale(1) rotateZ(135deg);} 
    100% {transform: translateY(50vh) scale(1.25) rotateZ(315deg);} 
} 
.logoSplash { 
    animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96); 
    -webkit-animation: logosplash 1.5s infinite cubic-bezier(0.46, 0.03, 0.52, 0.96); 
} 
.logo { 
    position: fixed; 
    width: 13.5vw; 
    height: 13.5vw; 
    left: 50%; 
    margin-top: calc(-6.75vw - 5px); 
    margin-left: calc(-6.75vw - 5px); 
    box-shadow: 0px 0px 10px #000, inset 0px 0px 5px #000; 
    border-radius: 25px; 
    border: 5px solid #fff; 
    transform: translateY(50vh) scale(0.6) rotateZ(-45deg); 
    z-index: 1002; 
} 
<div class="logo logoSplash"></div> 

Answer 1

Đó là bởi vì translateY(50vh) đã được giải thích khác nhau trong IE. (Tôi không chắc chắn về các chi tiết cụ thể về vấn đề này nên bạn có thể tự do giúp đỡ ở đây.) Xóa nó khỏi khung hình chính và thêm top:50%; vào .logo và điều đó sẽ khắc phục được sự cố.

Có vẻ như translateY(50vh) trong số transform: translateY(50vh) scale(0.6) rotateZ(-45deg); đang bị bỏ qua nhưng tôi không chắc chắn lý do. Ngoài ra, đó là ngữ nghĩa xấu để bao gồm các giá trị tài sản vẫn không đổi trong suốt một hình động: nó hoàn toàn dư thừa.