transition-delay를 어느곳에 주는냐에 따라 차이가 있는데 왜그런걸까요..?

Question

■ 질문 남기실 때 꼭! 참고해주세요.

- 먼저 유사한 질문이 있었는지 검색해주세요.
- 궁금한 부분이 있으시면 해당 강의의 타임라인 부분을 표시해주시면 좋습니다.
- HTML, CSS, JQUERY 코드 소스를 텍스트 형태로 첨부해주시고 스크린샷도 첨부해주세요.
- 다운로드가 필요한 파일은 해당 강의의 마지막 섹션에 모두 있습니다.

Uploads made easy

Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.
Uploads made easy

Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.
Uploads made easy

Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.
Uploads made easy

Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.
Uploads made easy

Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how your music appears to divsteners.

/* Google Web Font */ @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap'); /* Fontawesome 4.7 */ @import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); body { font-family: 'Raleway', sans-serif; line-height: 1.5em; margin: 0; } a { text-decoration: none; color:#fff; } .gallery{ list-style: none; margin:0; padding:0; height: 100vh; display: flex; } .gallery li{ flex:1; background:center no-repeat; border-right:3px solid #000; position:relative; overflow: hidden; transition:0.5s; } .gallery li:last-child{ border-right:none; } .gallery li:nth-of-type(1){background-image: url(images/artistic-image-01.jpg);} .gallery li:nth-of-type(2){background-image: url(images/artistic-image-02.jpg);} .gallery li:nth-of-type(3){background-image: url(images/artistic-image-03.jpg);} .gallery li:nth-of-type(4){background-image: url(images/artistic-image-04.jpg);} .gallery li:nth-of-type(5){background-image: url(images/artistic-image-05.jpg);} .gallery li .content{ position:absolute; width: 100%; background-color:#000; height: 250px; left:0; bottom:-300px; color:#fff; text-align: center; padding:20px; padding-top: 40px; box-sizing: border-box; transition:0.5s; } .gallery li .content:before{ content:''; position:absolute; width: 100%; height: 50px; top:0; left:0; background-color:#000; transform: rotate(-3deg) scale(1.3); transform-origin: left bottom; } .gallery li:hover{ flex:3; filter: grayscale(1); } .gallery li:hover .content{ bottom:0; transition-delay: 0.5s; } transition-delay:0.5s를 .gallery li .content와 .gallery li:hover .content 중 어느쪽에 주느냐에 따라 차이가 있는데 왜 그런걸까요...ㅠㅠ .gallery li .content에 주면 li에 마우스가 벗어날때 .content박스가 사라지는것까지 보여버리는데 (.gallery li:hover .content에 주면 문제없이 잘 작동됩니다.) .gallery li .content와 .gallery li:hover .content에 각각 transition-delay를 주는게 어떤 차이때문에 다르게 보이는지 알고싶습니다.

코딩웍스(Coding Works) · Answer

transition-delay는 어디에 주더라도 마우스가 올라갈 때는 동일하게 작동합니다. 하지만 어디에 주느냐에 따라 마우스가 나갈 때 transition-delay를 적용할지 말지를 결정합니다. 마우스가 나갈 때 차이를 확인해보세요. 정답은 없고 만드는 사람의 취향입니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. ekfdud91님의 질문에 대해 도움이 될만한 내용을 찾았습니다. transition-delay 속성의 위치가 달라짐으로 인해 생기는 동작 차이에 대한 궁금증을 해결해 줄 수 있는 관련 자료입니다. CSS에서 transition-delay 속성을 주는 위치에 따라 요소의 애니메이션 시작 시점이 달라지기 때문에, 마우스 호버 상태에서 해당 특성을 활용하는 방법에 대한 질문으로 이해됩니다. transition transition-delay속성 질문드립니다. 링크에서는 유사한 문제에 대한 질문과 이에 대한 답변을 확인할 수 있습니다. 이 답변에서는 transition 을 어느 속성에 적용하느냐에 따라 마우스를 올렸을 때와 내렸을 때의 애니메이션 효과 적용 방법에 차이가 있다고 설명하고 있습니다. 구체적으로, 마우스를 올렸을 때는 .gallery li:hover .content 에 transition-delay 를 적용하며, 이는 호버 상태가 될 때만 딜레이를 적용할 수 있기 때문입니다. 반면에 .gallery li .content 에 transition-delay 를 적용하는 경우, 항상 딜레이가 적용되어 올바르지 않은 동작을 초래할 수 있습니다. 이 답변은 질문자님의 경우와 밀접하게 연관되어 있으며, transition-delay 적용 위치에 따른 동작 차이와 올바른 사용법에 대해 설명하고 있습니다. 또한 혼란을 줄 수 있으므로 이미지 없이 일반적인 설명과 참조 링크만 제공합니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.