카테고리

질문 & 답변
세부 분야

웹 개발
해결 여부

미해결

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

24.06.26 14:40 작성 조회수 40

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

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

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>Flex 레이아웃 이미지 어코디언 네비게이션</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <ul class="gallery">
    <li>
      <div class="content">
        <h2>Uploads made easy</h2>
        <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how
          your music appears to divsteners.
        </p>
        <div class="sns">
          <a href="#none"><i class="fa fa-facebook"></i></a>
          <a href="#none"><i class="fa fa-instagram"></i></a>
          <a href="#none"><i class="fa fa-linkedin"></i></a>
          <a href="#none"><i class="fa fa-google-plus"></i></a>
        </div>
      </div>
    </li>
    <li>
      <div class="content">
        <h2>Uploads made easy</h2>
        <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how
          your music appears to divsteners.
        </p>
        <div class="sns">
          <a href="#none"><i class="fa fa-facebook"></i></a>
          <a href="#none"><i class="fa fa-instagram"></i></a>
          <a href="#none"><i class="fa fa-linkedin"></i></a>
          <a href="#none"><i class="fa fa-google-plus"></i></a>
        </div>
      </div>
    </li>
    <li>
      <div class="content">
        <h2>Uploads made easy</h2>
        <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how
          your music appears to divsteners.
        </p>
        <div class="sns">
          <a href="#none"><i class="fa fa-facebook"></i></a>
          <a href="#none"><i class="fa fa-instagram"></i></a>
          <a href="#none"><i class="fa fa-linkedin"></i></a>
          <a href="#none"><i class="fa fa-google-plus"></i></a>
        </div>
      </div>
    </li>
    <li>
      <div class="content">
        <h2>Uploads made easy</h2>
        <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how
          your music appears to divsteners.
        </p>
        <div class="sns">
          <a href="#none"><i class="fa fa-facebook"></i></a>
          <a href="#none"><i class="fa fa-instagram"></i></a>
          <a href="#none"><i class="fa fa-linkedin"></i></a>
          <a href="#none"><i class="fa fa-google-plus"></i></a>
        </div>
      </div>
    </li>
    <li>
      <div class="content">
        <h2>Uploads made easy</h2>
        <p>Use Spotify for Artists to upload your releases. With previews and simple edits, you can control exactly how
          your music appears to divsteners.
        </p>
        <div class="sns">
          <a href="#none"><i class="fa fa-facebook"></i></a>
          <a href="#none"><i class="fa fa-instagram"></i></a>
          <a href="#none"><i class="fa fa-linkedin"></i></a>
          <a href="#none"><i class="fa fa-google-plus"></i></a>
        </div>
      </div>
    </li>
  </ul>
</body>

</html>

/* 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를 주는게 어떤 차이때문에 다르게 보이는지

알고싶습니다.

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

순서 체크 가상클래스 활용한 실전 퍼블리싱 03(Flexbox 활용한 갤러리 이미지 어코디언 네비게이션)

강의실 바로가기

답변 2

좋아요순

최신순

답변을 작성해보세요.

코딩웍스(Coding Works)

지식공유자

2024.06.26

transition-delay는 어디에 주더라도 마우스가 올라갈 때는 동일하게 작동합니다.

하지만 어디에 주느냐에 따라 마우스가 나갈 때 transition-delay를 적용할지 말지를 결정합니다.

마우스가 나갈 때 차이를 확인해보세요.

정답은 없고 만드는 사람의 취향입니다.

인프런 AI 인턴

2024.06.26

안녕하세요, 인프런 AI 인턴입니다. ekfdud91님의 질문에 대해 도움이 될만한 내용을 찾았습니다.

transition-delay 속성의 위치가 달라짐으로 인해 생기는 동작 차이에 대한 궁금증을 해결해 줄 수 있는 관련 자료입니다. CSS에서 transition-delay 속성을 주는 위치에 따라 요소의 애니메이션 시작 시점이 달라지기 때문에, 마우스 호버 상태에서 해당 특성을 활용하는 방법에 대한 질문으로 이해됩니다.

transition transition-delay속성 질문드립니다. 링크에서는 유사한 문제에 대한 질문과 이에 대한 답변을 확인할 수 있습니다. 이 답변에서는 transition을 어느 속성에 적용하느냐에 따라 마우스를 올렸을 때와 내렸을 때의 애니메이션 효과 적용 방법에 차이가 있다고 설명하고 있습니다. 구체적으로, 마우스를 올렸을 때는 .gallery li:hover .content에 transition-delay를 적용하며, 이는 호버 상태가 될 때만 딜레이를 적용할 수 있기 때문입니다. 반면에 .gallery li .content에 transition-delay를 적용하는 경우, 항상 딜레이가 적용되어 올바르지 않은 동작을 초래할 수 있습니다.

이 답변은 질문자님의 경우와 밀접하게 연관되어 있으며, transition-delay 적용 위치에 따른 동작 차이와 올바른 사용법에 대해 설명하고 있습니다. 또한 혼란을 줄 수 있으므로 이미지 없이 일반적인 설명과 참조 링크만 제공합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

ekfdud91

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

이 글과 비슷한 Q&A

웹디자인과 퍼블리싱

브라켓 라이브 실행시 실행오류때문에 진도가안나갑니다..ㅠㅠ

공지

퍼블리셔 코딩테스트 질문입니다.