So erstellen Sie Transitions mit CSS 3

CSS 3 gibt Ihnen viele spannende Features für die Anzeige auf dem iPad und iPhone coole Effekte in das Design Ihrer Website zu erstellen. Die CSS 3 Übergang Eigenschaften machen es möglich, den Zustand eines Elements zu ändern. Mit Übergängen können Sie Dinge wie die Farbe eines Elements ändern oder Text machen verblassen, wenn jemand es klopft.

Mit Übergängen können Sie ein Element führen zu vergrößern, wenn es berührt (oder angeklickt), aber CSS 3 hat seine Grenzen. Nachdem das größere Bild vergrößert wird, wie es in dieser Figur gezeigt, haben Sie keine Möglichkeit, es zu schließen, wenn Sie CSS 3 mit javascript kombinieren.

bild0.jpg

Das Webkit-Übergang umfasst mehrere Eigenschaften. (Hinweis: Wenn mehrere Optionen angegeben werden, wird jeder in der Reihenfolge angewendet, aufgeführt).:

  • -Webkit-Übergang-Eigenschaft - Gibt an, welche Eigenschaft, wie Textfarbe, wirkt sich der Übergang.

  • -Webkit-Übergang-Dauer - Gibt die Anzahl der Sekunden, bis ein Übergang stattfindet. Die Dauer kann in Sekunden als 1s, 2s ausgedrückt werden, und so weiter, oder in Millisekunden, beispielsweise 500 ms, 250 ms, und so weiter.

  • -Webkit-Übergang-Verzögerung - Gibt eine Verzögerung, bevor ein Übergang beginnt. Zum Beispiel, fügen Sie eine Verzögerung von drei Sekunden, indem Webkit-Übergang-Verzögerung: 3s.

  • -Webkit-Übergang-Timing-Funktion - Gibt die Geschwindigkeitskurve eines Übergangs und ermöglicht es Ihnen, die Geschwindigkeit über die Dauer eines Übergangs zu ändern, indem so viele wie fünf vordefinierte Werte festgelegt wird:

  • Leichtigkeit - Der Standard wert- einen Übergangseffekt erzeugt, der langsam beginnt, wächst schnell, und dann wieder verlangsamt

  • linear - Schafft einen Übergang mit der gleichen Geschwindigkeit von Anfang bis Ende.

  • Einfachheit in - Erstellt einen Übergang, der langsam beginnt.

  • Leichtigkeit-out - Erstellt einen Übergang, der sich langsam endet.

  • Leichtigkeit-in-out - Erstellt einen Übergang, der langsam beginnt und endet.

  • kubisch-Bezier - Eine erweiterte Option, die es möglich zu definieren Ihre eigene Werte- eine Funktion, basierend auf der Bezier-Kurve ist, die seit den 1960er Jahren in der Computergraphik verwendet wurde, verwendet eine Sequenz von numerischen Werten von 0 bis 1.

Ähnliche

Menü