Wie kann ich ein Div mit „display: none“ in CSS animieren?

CSS-Animation und Anzeige Keine

Wenn Sie versuchen, ein Div mithilfe von CSS zu animieren, ist es wichtig, die Einschränkungen der Anzeigeeigenschaft zu verstehen. Während die Anzeige: keine; Die Eigenschaft kann ein Element aus der Ansicht ausblenden, sie entfernt es jedoch nicht aus dem Dokumentfluss. Dies kann zu Problemen beim Animieren von Elementen führen, die Platz auf der Seite beanspruchen.

Um den gewünschten Effekt zu erzielen, können Sie das Haupt-Div nicht direkt von display: none; anzeigen: block;. Stattdessen müssen Sie die Höhe des Haupt-Div auf 0 setzen und overflow:hidden; um es zunächst zu verbergen. Wenn es dann an der Zeit ist, dass das Haupt-Div eingeschoben wird, können Sie die Höhe des Div auf den gewünschten Wert animieren.

Hier ist ein Beispiel:

#main-div {
    height: 0;
    overflow: hidden;
    -moz-animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s;
    -o-animation-delay: 3.5s;
    animation-delay: 3.5s;
}

#main-div.fadeInDownBig {
    height: 375px;
}

Dies führt dazu, dass das Haupt-Div nach 3,5 Sekunden eingeblendet wird und die anderen Divs beim Eintritt in das Ansichtsfenster auf der Seite nach unten geschoben werden.

Beachten Sie, dass diese Technik auch mit anderen Attributen wie der Deckkraft funktioniert. Sie könnten beispielsweise ein Div einblenden, indem Sie seine Deckkraft schrittweise von 0 auf 1 erhöhen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Div mit „display: none“ in CSS animieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!