위 사이트 메인배너의 텍스트 애니메이션을 똑 같이 구현하려면 animation로 하는게 낫나요? 아님 transition 으로 하는것이 낫나요?
@keyframes up1 {
0% { transform:translateY(20px); opacity:0; }
10% { transform:none; opacity:1 }
90% { transform:none; opacity:1 }
100% { transform:translateY(20px); opacity:0 }
}
animation:up1; opacity:0; animation-duration:9s; animation-iteration-count: infinite; animation-direction: alternate;animation-fill-mode: forwards;
배너 이미지는 9초마다 바뀌게 했습니다. 위 처럼 텍스트에 적용하니, 배너 바뀔때마다(9초 다되가서) 사라진 글자가 다시 잠깐 보이네요.
어떻게 해야 제일 비슷할까요?
혹시 transition 으로 하려면 어떻게 해야 할까요?
|
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
2021-08-17 (화) 19:37:37
예시 사이트는 트랜지션으로 했네요
요소보기로 css를 참고하셔서 비슷하게 따라하시는게 가장 근접해보입니다
답변에 대한 댓글 1개
2021-08-18 (수) 04:46:04
블랑숑님 말씀처럼 레퍼런스 사이트의 css 코드가 trasform 으로 되어있네요
@Keyframe 으로 제어하는게 제 개인적으론 animation 보단 편하더라구요
답변에 대한 댓글 1개
답변을 작성하려면 로그인이 필요합니다.