將自定義過渡與 Animate.css 結合使用

在本主題中，您將學習如何使用 Animate.css 為註釋添加自定義過渡。

動畫.css 是一個隨時可用的跨瀏覽器動畫庫，可用於 Web 項目。Animate.css 由 Daniel Eden 創建（ @_dte , GitHub ).Animate.css 可用於增強註釋在視頻播放期間的顯示方式。

按照以下步驟將過渡添加到註釋。

  1. 登錄 Brightcove Interactivity Studio ( https://www.hapyak.com/login ).
  2. 在左側導航中，單擊管理 .
  3. 單擊一個項目將其打開。
  4. 點擊設置 .
  5. 在自定義註釋 CSS (URL) 字段中，添加以下 URL：
    //hapyak_demos.s3.amazonaws.com/css/light-styles.css
  6. 點擊提交 .
  7. 要向註釋添加動畫，請單擊編輯註釋的菜單。
  8. 點擊更多的...
  9. 點擊添加類 .
  10. 在裡面班級字段，輸入animated <動畫名稱>， 例如動畫 zoomInLeft .
  11. 點擊提交 .

以下動畫名稱在 Brightcove Interactivity 中有效。

  • 彈跳
  • 閃
  • 脈衝
  • 搖晃
  • 橡皮筋
  • 搖
  • 搖擺
  • 多田
  • 翻動

  • 合頁

  • 反彈
  • 反彈
  • 彈跳向下
  • 向左反彈
  • 向右彈跳

  • 淡入大
  • 淡入淡出大
  • 淡入左大
  • 右淡入大
  • 右淡入

  • 翻轉輸入X
  • 翻轉Y

  • 光速輸入

  • 旋轉輸入
  • 左下旋轉
  • 向右旋轉
  • 向左旋轉
  • 向右旋轉

  • 滾入
  • 放大
  • 左放大
  • 右放大
  • 放大
  • 放大縮小