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 de la izquierda, haga clic en Administrar .
3. Haga clic en un proyecto para abrirlo.
4. Haga clic en CONFIGURACIÓN .
5. En el campo Anotación personalizada CSS (URL), agregue esta URL:
   //hapyak_demos.s3.amazonaws.com/css/light-styles.css
6. Haga clic en ENVIAR .
7. Para agregar animaciones a las anotaciones, haga clic en el menú Editar de la anotación.
8. Haz clic en Más...
9. Haga clic en Agregar clase .
10. En el campo Clases , ingrese animado < el nombre de la animacion> , por ejemplo zoomInLeft animado .

    

11. Haga clic en ENVIAR .

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