Box nach X Sekunden verschwinden lassen.

[J o]

Hey,

es geht auch ohne JS und erst recht ohne Jquery, mit CSS Animation.

Ich weiß, die frage war aber nach JS/JQuery.

div {
padding:5%;
    margin:5%;
    width:200px;
    height:200px;
    background-color: #000;
    animation-name: houdini;
    animation-duration: 7s;
    animation-fill-mode: forwards;
}


@keyframes houdini{
    from {background-color: #000;}
    to {background-color: transparent;}
}

Zwei kleine Anmerkungen hätte ich da nur. Erstens fehlt dann ein animation-delay: 5s;. Und Zweitens, was noch viel wichtiger ist, darf nicht die Hintergrundfarbe verändert werden sondern die Opacity, plus, was bei mir noch fehlt ein display: none; am Ende der Animation oder Transition.

Wobei eine Transition immer vor einer Animation vorzuziehen ist, wie des öfteren hier im Forum schon erwähnt wurde.

Gruß
Jo