Using Custom Transitions with Animate.css

Animate.css is a library of ready-to-use, cross-browser animations for use in web projects. Animate.css was created by Daniel Eden ( @_dte, GitHub ). Animate.css can be used to enhance how annotations appear during video playback.

Follow these steps to add transitions to annotations.

1. Login to Brightcove Interactivity Studio (https://www.hapyak.com/login).
2. In the left navigation, click Manage.
3. Click on a project to open it.
4. Click SETTINGS.
5. In the Custom Annotation CSS (URL) field, add this URL:
   //hapyak_demos.s3.amazonaws.com/css/light-styles.css
6. Click SUBMIT.
7. To add animations to annotations, click the Edit menu for the annotation.
8. Click More...
9. Click Add Class.
10. In the Classes field, enter animated <the name of the animation>, for example animated zoomInLeft.

    

11. Click SUBMIT.

The following animation names are valid in Brightcove Interactivity.

• bounce
• flash
• pulse
• wobble
• rubberBand
• shake
• swing
• tada
• flip


• hinge


• bounceIn
• bounceInUp
• bounceInDown
• bounceInLeft
• bounceInRight


• fadeInUpBig
• fadeInDownBig
• fadeInLeftBig
• fadeInRightBig
• fadeInRight


• flipInX
• flipInY


• lightSpeedIn


• rotateIn
• rotateInDownLeft
• rotateInDownRight
• rotateInUpLeft
• rotateInUpRight


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