HTML / CSS - 중급 2편

* 애니메이션(animation)

• transition 세부 속성

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

---

• 다양한 애니메이션 효과

1. ONE-WAY 애니메이션

A에서 B로 정지없이 쭉 이동하는 애니메이션

* 이미지에 마우스 오버시 전체 배경색을 서서히 진하게

코딩 방법

1. 시작스타일 정하기

html

<div class="shop-item">
  <div style="position:relative;">
    <div class="overlay"></div>
    <img src="image/wak.png">
  </div>
</div>

css

.shop-item { margin : 10px; }
.shop-item img { display:block; }
ㅤ
.overlay {
    position : absolute;
    background-color : rgba(0, 0, 0, 0.4);
    opacity : 0; /* 요소의 투명도 조절 */
}

2. 최종스타일 정하기

이미지에 마우스 오버시 배경색을 서서히 진하게

css

.overlay { opacity: 1; }

3. 언제 최종스타일로 변할지 트리거 주기

css

.overlay:hover { opacity: 1; }

4. transition으로 서서히 동작하게 만들기

css

.overlay {
    position : absolute;
    background-color : rgba(0, 0, 0, 0.4);
    opacity : 0; /* 요소의 투명도 조절 */
    transition: all 2s; /* 해당 요소의 속성 변경시 2초동안 서서히 변화 */
}

---

* 이미지에 마우스 오버시 박스를 아래에서 위로 중간까지 올라오게

코딩 방법

1. 시작스타일 정하기

html

<div class="shop-items">
  <div style="position:relative;">
    <div class="overlays-wrap">
      <div class="overlays"></div>
    </div>
    <img src="image/waklogo.png">
  </div>
</div>

css

.shop-items { margin : 10px; }
.shop-items img { display:block; }
ㅤ
.overlays-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 넘치는 부분을 화면 상에서 안보이게 숨겨주는 효과 */
}
ㅤ
.overlays {
    width: 100%;
    height: 100%;
    background-color : rgba(0, 0, 0, 0.4);
    opacity : 0; /* 요소의 투명도 조절 */
    margin-top: 100%;
}

2. 최종스타일 정하기

이미지에 마우스 오버시 배경색을 서서히 진하게

css

.overlays{ margin-top : 50%; }

3. 언제 최종스타일로 변할지 트리거 주기

css

.overlays-wrap:hover .overlays{ margin-top : 50%; }

4. transition으로 서서히 동작하게 만들기

css

.overlay {
    .overlays {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    margin-top: 100%;
    transition: all 1s; /* 1초동안 margin-top 이 100%에서 50%으로 변경 */
}

★ 주의점 ★

{ overflow : hidden } 을 사용하여 넘치는 부분을 숨겨줘야 애니메이션이 적용되기 전 웹이 깨지지 않는다.

---