fadeIn (페이드인)

페이드인은 '서서히 나타남'을 의미하는 CSS Animation 효과다.
opacity, 즉 불투명도를 n초동안 0에서 1까지 주면 된다.

fadeIn: 채팅방 translateY(30px)

@keyframes fadeIn {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

.main-chat {
    animation: fadeIn 0.8s linear;
}

main-chat(메인 채팅 화면)을 '위에서 아래로 (translateY(30px))' 화면이 서서히 나타나는 fadeIn 효과를 주었다.

fadeIn: 프로필 사진+ 메세지 translateX(-20px)

/*상대 프로필 화면과 메세지*/
@keyframes message-row {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

.message-row {
    animation: message-row 1s ease-in-out;
}

/*내 메세지*/
@keyframes message-row--own {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

.message-row--own {
    animation: message-row--own 1s ease-in-out;
}

💻 Code

아래 html 코드를 보면 form reply는 두 개의 reply__column을 감싸는 container다.

<chat.html>

<form class="reply">
  <div class="reply__column">
    <i class="fa-regular fa-square-plus fa-lg"></i>
  </div>
  <div class="reply__column">
    <input type="text" placeholder="Write a message...">
    <i class="fa-regular fa-face-smile fa-lg"></i>
    <button>
      <i class="fa-solid fa-arrow-up"></i>
    </button>
  </div>
</form>

<chat.css>

.reply {
    transition: transform 0.3s ease-in-out;
}

.reply .reply__column:first-child, 
.reply .fa-face-smile, 
.reply button {
    transition: opacity 1s ease-in-out;
}
/*opacity의 효과는 1초 동안 ease-in-out으로 줄 것 */

.reply:focus-within .reply__column:first-child, 
.reply:focus-within .fa-face-smile, 
.reply:focus-within button {
    opacity: 0;
}

/*reply 내부에 elements가 focus 되면(조건), .reply__column의 첫번째 컬럼, 웃는 표정의 이모지, 버튼의 opacity는 0이 된다.(실행)*/

.reply input {
    transition: all 0.3s ease-in-out;
    /* transition은 애니메이션 효과로 인한 변화를 부드럽게 확인할 수 있도록 해준다*/
    /* transition이 없다면 애니메이션 효과가 뚝뚝 끊어지는 것처럼 보인다.*/
}

.reply input:focus {
    width: 98vw;
    transform: translateX(-11%) translateY(-80px);
}
/* 만약 input이 focus 되면 (조건), 그 다음 문장들을 실행한다. 여기서 transform이 잘 작동하는 이유는
바로 위 코드에서 .reply input이 transition을 가졌기 때문이다.*/

.reply:focus-within {
    transform: translateY(80px);
}
/*reply 안에 있는 무언가가 focus 되면 (조건), 다음 문장이 실행된다.*/

focus-within

focus-within property는 내부적으로 focus된 element가 있는지 확인한다.

.reply:focus-within .reply__column:first-child {

}

위의 코드는 reply 내부에 focus된 (클릭 된) element가 있다면 그 뒷문장인 .reply__column:first-child {} 가 실행된다는 뜻이다.

.reply:focus-within : 조건문
.reply__column:first-child {}: 실행문

transition

• transition은 애니메이션 효과로 인한 변화를 부드럽게 보여준다.
• transition이 없다면 애니메이션 효과가 뚝뚝 끊어지는 것처럼 보인다.
• transform을 사용하려면 해당 클래스의 부모 element에서 transition이 되어 있어야 한다.
  예를 들어, .reply(부모)에 transition이 되어있어야 .reply의 자식들에서 transform이나 animation을 사용할 수 있다.

.reply {
    transition: transform 0.3s ease-in-out;
}
.reply:focus-within {
    transform: translateY(80px);
}

.reply input(부모)에 transition이 되어있어야 .reply의 자식들(.reply의 input 내부가 focus 되었을 때)에서 transform이나 animation을 사용할 수 있다.

.reply input {
    transition: all 0.3s ease-in-out;
}

.reply input:focus {
    width: 98vw;
    transform: translateX(-11%) translateY(-80px);
}

"visibility: hidden"과 "opacity: 0" 차이

"visibility: hidden"과 "opacity: 0"은 둘 다 요소를 숨기는 데 사용되는 CSS 속성이다.

"visibility: hidden"은 요소를 화면에서 숨기지만, 공간은 유지한다. 즉, 숨겨진 요소의 영역은 다른 요소에 영향을 줄 수 있다. 예를 들어, "visibility: hidden"을 적용한 요소는 해당 요소의 배경색, 테두리, 패딩 등이 여전히 존재하며, 이로 인해 다른 요소들의 위치와 크기에 영향을 줄 수 있다.

반면에, "opacity: 0"은 요소를 투명하게 만들어 화면에서 완전히 사라지게 한다. 즉, 요소의 공간도 사라지기 때문에 다른 요소들에 영향을 주지 않는다.

따라서, "visibility: hidden"과 "opacity: 0"은 사용 목적에 따라 다르다. 만약 요소를 숨기면서도 해당 요소의 공간을 유지하고 싶다면 "visibility: hidden"을 사용하고, 요소를 완전히 숨기고자 할 때는 "opacity: 0"을 사용하는 것이 적절하다.

결과