Utilisation de transitions personnalisées avec Animate.css

Dans cette rubrique, vous apprendrez à ajouter des transitions personnalisées pour les annotations en utilisant Animate.css.

Animate.css est une bibliothèque d'animations prêtes à l'emploi pour tous les navigateurs, à utiliser dans les projets web. Animate.css a été créé par Daniel Eden ( @_dte, GitHub ). Animate.css peut être utilisé pour améliorer l'affichage des annotations pendant la lecture d'une vidéo.

Procédez comme suit pour ajouter des transitions aux annotations.

  1. Connectez-vous à Brightcove Interactivity Studio(https://www.hapyak.com/login).
  2. Dans la navigation de gauche, cliquez sur Gérer.
  3. Cliquez sur un projet pour l'ouvrir.
  4. Cliquez sur SETTINGS.
  5. Dans le champ CSS d'annotation personnalisée (URL), ajoutez cette URL :
    //hapyak_demos.s3.amazonaws.com/css/light-styles.css
  6. Cliquez sur SOUMETTRE.
  7. Pour ajouter des animations aux annotations, cliquez sur le menu Édition de l'annotation.
  8. Cliquez ici pour en savoir plus...
  9. Cliquez sur Ajouter une classe.
  10. Dans le champ Classes , entrez animated <le nom de l'animation>, par exemple animated zoomInLeft.
  11. Cliquez sur SOUMETTRE.

Les noms d'animation suivants sont valables dans Brightcove Interactivity.

  • rebondir
  • éclat
  • impulsion
  • vaciller
  • élastique
  • secouer
  • balançoire
  • tada
  • flip

  • charnière

  • rebondir
  • rebondir
  • bounceInDown
  • bounceInLeft
  • bounceInRight

  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig
  • fadeInRight

  • flipInX
  • flipInY

  • lightSpeedIn

  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight

  • rouler
  • zoomIn
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomInDown