我如何使用animation. css与animation.fill.mode

我有一个简单的示例，其中当单击按钮时图像淡入。我希望在fadeIn-animation完成后图像保持不变，并尝试使用animation-fill-mode: forward来做到这一点。然而，这行不通。如果你能给我一点提示，我会很感激的。

这是我的代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animate.css!</title>
    <link rel="stylesheet" href="animate.css">
</head>
<body>
<a href="#" class="button" id="first">Hola!</a>
<img src="tucan.png" id="tucan" alt="Tucan">
<style type="text/css">
    body {
        margin: 50px;
        background: #2980b9;
        font-family: sans-serif;
        text-align: center;
    }
    a.button {
        background:#e74c3c;
        color: white;
        padding: 20px;
        text-decoration: none;
        display: inline-block;
        font-size: 50px;
        border-radius: 10px;
    }
    #tucan {
        opacity: 0;
        -webkit-animation-duration: 3s;
    -webkit-animation-delay: 0s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var animationName = 'animated fadeIn';
var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
$(function(){
    $('#first').on('click',function(){
        $('#tucan').addClass(animationName).one(animationEnd, function (){
                $(this).removeClass(animationName);
        });
    });
});

</script>
</body>
</html>

尝试使用

$('#first').on('click',function(){
    $('#tucan').addClass(animationName).one(animationEnd, function (){
            $(this).removeClass(animationName);
            $(this).css( "opacity", 1 );
    });
});

或

$('#first').on('click',function(){
    $('#tucan').addClass(animationName);
});

相关内容

最新更新

热门标签：