css 슬라이드 애니메이션(크로스페이드 슬라이드)

이미지가 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개로 작업도 해보았습니다.

그런데 크로스페이드는 도저히 응용이 안돼요