Benutzerdefinierte Übergänge mit Animate.css verwenden

In diesem Thema erfahren Sie, wie Sie mit Animate.css benutzerdefinierte Übergänge für Anmerkungen hinzufügen können.

Animate.css ist eine Bibliothek mit gebrauchsfertigen, browserübergreifenden Animationen für den Einsatz in Webprojekten. Animate.css wurde von Daniel Eden ( @_dte, GitHub ) erstellt. Animate.css kann verwendet werden, um die Darstellung von Kommentaren während der Videowiedergabe zu verbessern.

Gehen Sie folgendermaßen vor, um Übergänge zu Kommentaren hinzuzufügen.

  1. Melden Sie sich bei Brightcove Interactivity Studio(https://www.hapyak.com/login) an.
  2. Klicken Sie in der linken Navigation auf Verwalten.
  3. Klicken Sie auf ein Projekt, um es zu öffnen.
  4. Klicken Sie auf EINSTELLUNGEN.
  5. Fügen Sie im Feld Custom Annotation CSS (URL) diese URL hinzu:
    //hapyak_demos.s3.amazonaws.com/css/light-styles.css
  6. Klicken Sie auf SUBMIT.
  7. Um Animationen zu Anmerkungen hinzuzufügen, klicken Sie auf das Menü Bearbeiten für die Anmerkung.
  8. Klicken Sie mehr...
  9. Klicken Sie auf Klasse hinzufügen.
  10. Geben Sie in das Feld Klassen den Namen der Animation> animated < ein, z. B. animated zoomInLeft.
  11. Klicken Sie auf SUBMIT.

Die folgenden Animationsnamen sind in Brightcove Interactivity gültig.

  • aufprallen
  • Blitz
  • puls
  • wackeln
  • rubberBand
  • schütteln
  • schaukel
  • tada
  • flip

  • scharnier

  • bounceIn
  • bounceInUp
  • bounceInDown
  • bounceInLeft
  • bounceInRight

  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig
  • fadeInRight

  • flipInX
  • flipInY

  • lightSpeedIn

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

  • rollIn
  • zoomIn
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomInDown