Uso de transiciones personalizadas con Animate.css

Animar.css es una biblioteca de animaciones entre navegadores listas para usar para su uso en proyectos web. Animate.css fue creado por Daniel Eden ( @_dte , GitHub ). Animate.css se puede usar para mejorar la forma en que aparecen las anotaciones durante la reproducción de video.

Siga estos pasos para agregar transiciones a las anotaciones.

1. Inicie sesión en Brightcove Interaction Studio (https://www.hapyak.com/login).
2. En la barra de navegación izquierda, haga clic en Administrar.
3. Haga clic en un proyecto para abrirlo.
4. Hacer clic AJUSTES.
5. En el campo Anotación personalizada CSS (URL), agregue esta URL:
   //hapyak_demos.s3.amazonaws.com/css/light-styles.css
6. Hacer clic ENTREGAR.
7. Para agregar animaciones a las anotaciones, haga clic en el menú Editar de la anotación.
8. Haz clic en Más...
9. Hacer clic Agregar clase.
10. En el Clases campo, ingrese animado <el nombre de la animación> , Por ejemplo ZoomInLeft animado.

    

11. Hacer clic ENTREGAR.

Los siguientes nombres de animación son válidos en Brightcove Interactividad.

• rebotar
• destello
• legumbres
• tambalearse
• banda elástica
• agitar
• balancearse
• tada
• voltear


• bisagra


• rebotar
• rebotarenarriba
• rebotar hacia abajo
• rebotea la izquierda
• rebote en la derecha


• FadeInUpGrande
• DesvanecerseAbajoGrande
• desvanecerse en la izquierda grande
• DesvanecerseEnDerechaGrande
• desvanecerse a la derecha


• FlipInX
• FlipInY


• velocidad de la luz


• rotar
• rotarAbajoIzquierda
• giraradentroabajoderecha
• rotarArribaIzquierda
• rotarArribaDerecha


• llegar
• acercarse
• acercar a la izquierda
• acercar a la derecha
• AcercarArriba
• acercarAbajo