Question

我在Edge上测试我网站的兼容性时遇到了麻烦。实际上，我有一个CSS动画，允许cosmonaute在页面中移动和旋转。当鼠标悬停在cosmonaute上时，它应该停止运行并显示一个＆＃34;你好＆＃34;。它可以在Chrome，Mozilla上运行，但是在Edge中它确实停止移动而不是ROTATING。我无法在官方MS网站上找到任何帮助。提前感谢您的帮助！

这是我的CSS：

/* 6. Animation cosmonaute */
#cosmonaute {
    background-image: url('Sources/img/cosmonaute.png');
    width: 81.9px;
    height: 89px;
    cursor: pointer;
    z-index: 99999;
    position: absolute;
    bottom: 0;
    left:-10%;
    -webkit-animation-name: animCosmonaute;
    animation-name: animCosmonaute;
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}


@-webkit-keyframes animCosmonaute {
    0% {bottom:0; left:0;}
    25%{bottom:15em; left:15em;}
    50%{bottom:30em; left:30em;}
    75%{bottom:45em; left:45em;}
    100%{-webkit-transform: rotate(360deg) scale(1.5,1.5);transform: rotate(360deg) scale(1.5,1.5);bottom:60em; left:55em;}
}
@keyframes animCosmonaute {
    0% {bottom:0; left:0;}
    25%{bottom:15em; left:15em;}
    50%{bottom:30em; left:30em;}
    75%{bottom:45em; left:45em;}
    100%{-webkit-transform: rotate(360deg) scale(1.5,1.5);transform: rotate(360deg) scale(1.5,1.5);bottom:60em; left:55em;}
}

#cosmonaute p {
    position: absolute;
    top: -20%;
    right: 0;
    display: none;
}

这是我的JS代码：

// 2. Animation cosmonaute
    var play = 1;
    $('#cosmonaute').hover(function () {
        $('#cosmonaute').css('animation-play-state', 'paused');
        if (play === 1) {
            $('#cosmonaute').css('animation-play-state', 'paused');
            $('#cosmonaute').children(':first').css('display', 'block');

            play = 0;
        } else {
            $('#cosmonaute').css('animation-play-state', 'running');
            $('#cosmonaute').children(':first').css('display', 'none');
            play = 1;
        }
    });

动画暂停部分无法在边缘

0 个答案: