Animate.css에서 사용자 정의 전환 사용

이 항목에서는 Animate.css를 사용하여 주석에 대한 사용자 정의 전환을 추가하는 방법을 배웁니다.

애니메이트.css  웹 프로젝트에서 사용할 수 있는 바로 사용할 수 있는 교차 브라우저 애니메이션 라이브러리입니다. 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. 에서클래스필드, 입력애니메이션 <애니메이션의 이름> , 예를 들어애니메이션 줌인레프트 .
  11. 제출 을 클릭합니다.

다음 애니메이션 이름은 Brightcove Interactivity에서 유효합니다.

  • 되튐
  • 플래시
  • 맥박
  • 동요
  • 고무줄
  • 떨림
  • 그네
  • 짜잔
  • 튀기다

  • 돌쩌귀

  • 바운스인
  • 바운스인업
  • 바운스인다운
  • 바운스 인 레프트
  • 오른쪽으로 바운스

  • 페이드인업빅
  • fadeInDown큰
  • fadeInLeftBig
  • 페이드인오른쪽큰
  • 페이드인라이트

  • flipInX
  • flipInY

  • lightSpeedIn

  • 회전
  • 왼쪽 아래로 회전
  • 오른쪽 아래로 회전
  • 왼쪽으로 회전
  • 오른쪽으로 회전

  • 롤인
  • 줌인
  • 확대/축소
  • 확대 오른쪽
  • 줌인업
  • 줌인다운