How can I use animate.css with animation.fill.mode?
<p>I have a simple example in which an image fades in when a button is clicked. I want the image to stay after the fadeIn-animation is done and tried to do so with animation-fill-mode: forwards. However, that doesn't work. I'd be very thankful for a short hint. </p>

<p>This is my code:</p>

<pre><code>&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;Animate.css!&lt;/title&gt;
    &lt;link rel="stylesheet" href="animate.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href="#" class="button" id="first"&gt;Hola!&lt;/a&gt;
&lt;img src="tucan.png" id="tucan" alt="Tucan"&gt;

&lt;style type="text/css"&gt;
    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;
    }



&lt;/style&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
&lt;script&gt;
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);
        });
    });
});


&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>