인프런 커뮤니티 질문&답변
작성한 질문수
css 슬라이드 애니메이션(크로스페이드 슬라이드)
작성
·
275
1
이미지가 4개이면
키프레임 구간을 어떻게 나누며
@keyframes slide {
0% {
opacity: 0;
}
0% {}
0% {}
0% {}
100% {}
}
그리고 애니메이션 딜레이는 어떻게 주나요?
.slide div a:nth-child(1) {
animation-delay: 0s;
.slide div a:nth-child(2) {
animation-delay: 0s;
.slide div a:nth-child(3) {
animation-delay: 0s;
.slide div a:nth-child(4) {
animation-delay: 0s;
가로 슬라이드와 세로 슬라이드는 이해도 되고
이미지 4개로 작업도 해보았습니다.
그런데 크로스페이드는 도저히 응용이 안돼요
답변 1
0
코딩웍스(Coding Works)
지식공유자
CSS 슬라이드 방식은 아래와 같이 이미지 3개를 위해 만들어진 것입니다.
슬라이드 이미지가 3개가 아닌 경우는 CSS로 할 경우 굉장히 복잡해지고 키프레임도 전면 수정되어야 합니다.
슬라이드 이미지가 3개가 아닌 경우는 제이쿼리 슬라이드 방식으로 하셔야 합니다.
하지만 공개문제에 슬라이드가 3개라서 굳이 4개를 CSS방식으로 만드실 필요는 전혀 없습니다.