애니메이션 시간차

인프런 커뮤니티 질문&답변

허혜정

작성한 질문수

부트스트랩을 활용한 반응형 웹제작 [실전편] 부트캠프

step02-로딩이미지와 네비게이션 바 추가하기

해결된 질문

작성

animation.css에서 강의대로 animate__fadeInLeftBig을 가져왔는데 첫 슬라이드는 자연스럽게 나옵니다.

두번째 슬라이드에서는 중간에 살짝 덜컹거리듯이 하며 나오는 문제와 next 버튼을 클릭했을 때 다음 화면을 넘어가게 되면 애니메이션 텍스트의 나타나는 시간과 이미지가 슬라이드되서 보여지는 시간 차이가 납니다.

혹시 animatin.css 에서 선언된 애니메이션 옵션이 변경 가능한지 궁금합니다.

HTML/CSS bootstrap 웹-디자인 반응형-웹

답변 1

영코디 킴쌤

지식공유자

animate.css 는 말그대로 애니메이션을 다양하게 종류별로 구현해 놓은 플러그인이기 때문에 링크로 연결한 css를 보면 내가 선택한 애니메이션 종류에 대한 클래스명과 해당 css 애니메이션 코드가 있습니다.

이것을 변경하여 사용하고 싶다면 해당 css 링크파일에서 선택하고 있는 선택자를 그대로 복사하여 내 css 파일인 mystyle.css에 붙여넣고 애니메이션 코드를 수정하여 덮어쓰기할 수 있습니다.

애니메이션이 처음 시작하는 시간이나 전체 시간을 animation-delay 속성이나 @keyframe 을 이용하여 수정해 보세요 :)

허혜정

작성한 질문수

전체 Q&A

질문하기