HTML Transition 속성으로 CSS 애니메이션 구현

1. one-way 애니메이션 만드는 step

• 1. 시작스타일 만들기
• 2. 최종스타일 만들기
     - 붕 뜨는 요소 만들기: position: absolute 사용하기
• 3. 언제 최종스타일로 변하는지

<div class="shop-bg">
        <div class="shop-container">
            <div class="shop-item">
                <div style="position: relative;">
                    <div class="overlay"></div>
                    <img src="images/product1-1.jpeg">
                </div>
            </div>
            <div class="shop-item">
                <img src="images/product2.jpeg">
            </div>
            <div class="shop-item">
                <img src="images/product3.jpeg">
            </div>
        </div>
    </div>

.shop-bg {
    background-color: #eee;
    padding: 20px;
}

.shop-container {
    display: flex;
    width: 90%;
    margin: auto;
}

.shop-item {
    width: 33%;
    padding: 10px;
}

.shop-item img {
    width: 100%;
    // overlay 클래스가 이미지와 길이가 안 맞을때 사용
    display: block;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

// 이미지에 마우스를 가져다 대면, 
.overlay:hover {
    opacity: 1;
}

• 
• 위와 같이 overlay 클래스가 이미지 보다 살짝 클때, 이미지에 display: block 속성을 주면 길이가 같아진다.
  
• 애니메이션을 주려면, transition: all 시간s; 사용

2. transition 세부속성

.box {
  transition-delay: 1s; /* 시작 전 딜레이 */
  transition-duration: 0.5s; /* transition 작동 속도 */
  transition-property: opacity; /* 어떤 속성에 transition 입힐건지 */
  transition-timing-function: ease-in; /* 동작 속도 그래프조정 */
}

3. overflow 속성

<div style="width: 50px; height: 50px; overflow: hidden">
    <p>aaaaaaaaaaaaaaaaaaa</p>
</div> 

• overflow라는 속성은 박스의 폭이나 높이를 초과하는 내부요소를 처리하기 위한 속성입니다. hidden 값을 주면 넘치는 내부요소를 자동으로 잘라 없애줍니다. 그래서 위 예제는 박스를 넘어가는 글자를 잘라 없애줍니다. 글자 뿐만 아니라 이미지, 박스 이런게 넘쳐 흘러도 똑같이 잘라 없애줍니다. overflow : visible은 넘치는 부분을 그대로 보여주고 overflow : scroll은 넘치는 요소를 보기 위한 스크롤바가 생길 수 있습니다.