/* https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation */

.idle {
    width: 67px;
    height: 67px;
    /*Time in s which the animation starts afterwards */
    /*10 min*/
    animation-delay: 600s;
    /*name of the animation in reference to the keyframe*/
    animation-name: trigger_cat_door;
    /*complete time for keyframe animation*/
    animation-duration: 50s;

}

/*from Grey to Black*/
@keyframes change-color {
    from {
        background: #f5f5f5;
    }
    to {
        background: #1b1b1b;
    }
}

/*
1. from grey to black
2. from black to door
3. from door to animated gif
4.from animated gif to black
5.from black to grey

Important here is the animation-duration is split into the given percentages

*/
@keyframes trigger_cat_door {

    0% {
        background: #f5f5f5;
    }
    20% {
        background: #1b1b1b;
    }
    30% {
        background-image: url("../img/idle/door.png");
    }
    40% {
        background-image: url("../img/idle/pixel_cat_door_black_steam.gif");
    }
    85% {
        background: #1b1b1b;
    }
    100 % {
        background: #f5f5f5;
    }

}