Question

我有一个CSS动画，可以在窗口加载时使徽标变大，然后缩小到大小。工作得很好，但是如果我缩小窗口然后再重新设置它，那么动画会重放。有没有我可以合并jQuery（或CSS修复），它会在加载一次后禁用动画？我以为我可以用animation-play-state: paused;做点什么，但是我希望它能玩一次，所以我不确定我该怎么做。

也许onLoad分配类，然后在动画完成后取消分配类。只是觉得这可行吗？任何人对我如何去做都有任何想法？

#logo {
    max-width: 260px;
    height: auto;
    width: 40%;
    -webkit-animation: animate 3s ease;
-moz-animation: animate 3s ease;
-ms-animation: animate 3s ease;
-o-animation: animate 3s ease;
}

谢谢！

Answer 1

您可以通过测试更改的CSS属性并相应地执行此操作来使用JQuery：

例如： JQuery的：

    $(document).ready(function() {
    // run test on initial page load
    checkSize();

    // run test on resize of the window
    $(window).resize(checkSize);
});

//Function to the css rule
function checkSize(){
    if ($(".logo").css("float") == "none" ){
        // your code here
    }
}

你的css：

    .logo {float:left;}
@media only screen and (max-width: 800px){
    .logo {float:none;}
}

source

在窗口调整大小时禁用CSS动画

1 个答案: