Animieren Sie die CSS-Übergangseigenschaft innerhalb: After/: Vor Pseudoklasse

Question

Ist es möglich, CSS-Pseudoklassen zu animieren?

Sag ich habe:

#foo:after {
    content: '';
    width: 200px;
    height: 200px;
    background: red;
    display: block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#foo:hover:after {
    width: 250px;
    height: 250px;
}

Ist das überhaupt möglich? Ich habe getestet und bisher kann ich keine Lösung finden. Ich versuche, die Menge an JavaScript -Unterstützung zu reduzieren, die ich durch die Verwendung von Modernizr benötige.

Ich habe bereits eine JavaScript -Methode, also bitte keine JavaScript -Alternativen.

Demo: http://jsfiddle.net/mxtvw/

Answer 1

Ihre Geige funktioniert für mich in Firefox. Und soweit ich weiß und wenn Dieser Artikel Auf dem neuesten Stand ist dies der einzige Browser, der Pseudoelemente animieren kann.

---

BEARBEITEN: Ab 2016 ist der Link zum Artikel gebrochen und die Relevanter Webkit -Fehler war Fest vor 4 Jahren. Lesen Sie weiter, um andere Antworten zu sehen, diese ist veraltet.

Answer 2

Google Chrome hat den Webkit -Fehlerfix in Version 27.0.1453.110 m hinzugefügt

Dieser Webkit -Fehler wurde behoben: http://trac.webkit.org/changeset/138632

ES IST MÖGLICH Pseudo animieren :before und :after, Hier sind einige Beispiele für die Animation der PSUEDO-Elemente :before und :after.

Hier ist eine Änderung Ihres Beispiels oben mit einigen Änderungen, die es ohne die simulierten Simulierung reibungsloser machen mouseleave / mouseout Verzögerung bei Schwebungen:

http://jsfiddle.net/mxtvw/234/

Versuchen Sie, den Hauptwählten hinzuzufügen #foo mit dem gruppierten :hover Pseudoklasse in Ihrer zweiten :hover Pseudoklasse-Regel. Fügen Sie auch die hinzu transition Eigenschaft und nicht nur der ansprecher spezifische vorangestellte Eigenschaften für transition:

#foo:after{
   display: block;
   content: '';
   width: 200px;
   height: 200px;
   background: red;
   -webkit-transition: all .4s ease-in-out;
   -moz-transition: all .4s ease-in-out;
   -o-transition: all .4s ease-in-out;
   transition: all .4s ease-in-out;
} 

#foo,
#foo:hover:after,
#foo:hover:before{
   width: 250px;
   height: 250px;
}

Beachten Sie, dass Pseudoelemente wie vorwärts gehen :before und :after Sollte die Doppel -Dickdarm -Syntax verwenden ::before und ::after. In diesem Beispiel simuliert ein Verblassen mit einer Overlay background-color und ein background-image auf schwebe:

http://jsfiddle.net/mxtvw/233/

Dieses Beispiel simuliert eine Animation der Rotation bei Schwebede:

http://jsfiddle.net/jm54s/28/

Natürlich mit CSS3 -Standards, die wir verwenden konnten ::before und ::after.

Dies funktioniert in der neuesten Firefox, Chrome, Safari, Opera 18+, IE10, IE11 (IE9 und unten unterstützen Sie keine CSS3 -Übergänge oder animieren.)

Answer 3

Es scheint nicht zu funktionieren jetzt jedoch nach dem W3 -Spezifikationen Sie können Übergänge zu Pseudoelementen anwenden. Vielleicht etwas Zeit in Zukunft…

Answer 4

Ich habe gerade herausgefunden, dass Sie animieren können: Nach und: Vorher (:

Code Beispiel-

  .model-item {
    position: relative;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: transparent;
      transition: all .3s;
    }
  }

  .opc {
    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      background: rgba(0, 51, 92, .75);
    }
  }

Ich habe das Div. Also habe ich eine andere Klasse hinzugefügt, die den Hintergrund ändert, und ich habe den Übergangscode zum Haupt -Main hinzugefügt: AFT (vor der Animation)