CSS3 animation fadeOut

Ich versuche, dissappear Bootstrap-Alarm nach 3seconds. Ich machte es, aber es verschwindet, und behält die Höhe von div. Kann ich das entfernen, dass div mit der CSS nur? Ich habe versucht, display:none; und es auch nicht funktioniert. Ich brauche Hilfe.

Dies ist, was ich getan habe:

CSS:

.alert-success {
    -webkit-animation: fadeOut 3s linear forwards;
    animation: fadeOut 3s linear forwards;
}


@-webkit-keyframes fadeOut {
    0%   {opacity: 1;}
    70%  {opacity: 1;}
    90% {opacity: 1;-webkit-transform: translateY(0px);}
    100% {opacity: 0;-webkit-transform: translateY(-30px);}
}

HTML: 

<div class="alert alert-success">
   Well done! You successfully read this important alert message.
</div>

Vielen Dank im Voraus

InformationsquelleAutor Alpan Karaca | 2014-06-22
  1. 3

    Geben diesem einen Versuch!

    JSFiddle:

    http://jsfiddle.net/Q9kYa/9/

    #alert-success{
    background-color: #FF0000;
    animation:alert-success 0.5s 1;
    -webkit-animation:alert-success 0.5s 1;
    animation-fill-mode: forwards;

    animation-delay:2s;
    -webkit-animation-delay:1s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;

} 

@-webkit-keyframes alert-success{
    0%   {opacity: 1;}
    70%  {opacity: 1;}
    90% {opacity: 1;-webkit-transform: translateY(0px);}
    100% {opacity: 0;-webkit-transform: translateY(-30px);}
}
    • Wenn Sie check diese: jsfiddle.net/Q9kYa/12 ich will Blaue Linie nach der roten Linie dissappears.
    • Haben Sie JQuery verwenden... ist das okay? Ich werde es wirklich einfach für Sie
    • Ich weiß, wie man es mit jQuery. Ich will nicht, es zu benutzen. Ich möchte lösen diese mit CSS.
    • Wie etwa Schiebe es mit css? anstelle von fading?
    • Ich habe es mit "margin-top:-20px;" und es hat funktioniert, aber dies ist nicht eine gültige Lösung, die ich die richtige erraten? Danke, dass Sie versuchen, wenn Sie einen besseren Weg, sagen Sie mir bitte. Jetzt schau mal hier: jsfiddle.net/Q9kYa/17
    • Ja, es funktioniert 🙂 ich denke, dass würde das Problem behoben, und es ist nicht ein schlechtes workaround. Wird Sie wissen lassen, wenn ich etwas besseres zu arbeiten 🙂

    InformationsquelleAutor imbondbaby
Schreibe einen Kommentar