Komma-getrennte WebKit-Animations-Keyframes

Eine weitere Kleinigkeit, die ich von Estelle auf dem SXSW 2011 CSS3: Beyond The Basics Panel gelernt habe, war, dass man die Keyframe-Werte in einer WebKit-Animationsdeklaration durch Kommas trennen kann. Nehmen wir an, Sie möchten einen Pulsierungseffekt als Animation erstellen. Eine Möglichkeit dazu wäre, eine Animation zu haben, die die Opazität bei 0% und 100% ändert, und dann die iteration-count so einstellt, dass sie ein paar Mal läuft. Aber Sie können dasselbe erreichen, indem Sie die Pulsierungsanimation mehrere Werte innerhalb einer einzigen Iteration haben lassen, so:

@-webkit-keyframes pulsate {
        0%, 50%, 100% {
                opacity: 1;
        }
        25%, 75%  {
                opacity: 0.75;
        }
}

Zugegeben weniger flexibel, da die Änderung der iteration-count ziemlich einfach ist, obwohl, wenn Sie buchstäblich eine Animation namens „pulsate“ wie oben haben, könnte ich argumentieren, dass es semantisch richtiger ist, es so zu machen.

Ich habe die Snippet-Seite zur WebKit Keyframe Animation Syntax aktualisiert, um dies widerzuspiegeln und sie im Allgemeinen viel vollständiger zu machen.

Kommentare

Andre

# 22. März 2011

Das ist ziemlich cool, soweit ich das aus diesem Beitrag entnehmen konnte. Die erste Reihe von Prozentwerten sagt Ihrem Element, dass es eine Opazität von 1 haben soll, während die zweite Reihe Ihrem Element sagt, dass es eine Opazität von .75 über X Sekunden mittels -webkit-animation haben soll… Nett! Das gefällt mir!

Aaron Stone

# 22. März 2011

Hey, das ist tatsächlich semantischer, wenn man es verwendet, um den An-und-Aus-Pulsierungseffekt bei Buttons nachzuahmen.

Zum Beispiel:

@-webkit-keyframes pulsate {
        0%, 50%, 100% {
                background-color: #82c7ff;
        }
        25%, 75%  {
                background-color: #49a7f3;
        }
}

#my-button {
  background-color: #49a7f3;
  display: inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  color: white;
  text-decoration: none;
  border: none;
  font-size: 22px;
  font-weight: bold;
}

#my-button:focus {
  -webkit-animation: pulsate 1s infinite;
}

Wenn ich mich in irgendeinem Punkt irren sollte, korrigieren Sie mich gerne =)

redlex

# 22. März 2011

Vielen Dank für diesen sehr detaillierten Artikel. Ich habe gerade eine neue Website mit WordPress erstellt.http://colorfashion.co.cc/ Ich musste einige Hacks durchführen, um sie perfekt zu machen. Dieser Artikel wird mir definitiv für meine nächste Website helfen.

Julian

# 26. März 2011

cool…
dank der Serie „@-webkit“ :D

Avi

# 31. März 2011

sehr nette Tipps….

sahara

# 3. April 2011

sehr nette Informationen! Danke! :)

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.