17. [CSS] CSS Animation - 1

이번 포스팅에서는 CSS를 활용한 동적인 애니메이션 효과를 주는 방법을 알아보도록 하겠습니다. 

구글링을 해보니 CSS를 활용하여 애니메이션 효과를 주려면 @keyframe from ~ to ~를 활용한 애니메이션을 주는 방법이 많더라구요!

 

또한, 이런 애니메이션 효과는 JavaScript를 활용하여도 충분히 쉽게 부여할 수 있는 기능들 입니다. 

하지만 CSS만을 활용한 동적 효과를 부여하는 공부는 CSS에 대한 깊은 이해가 바탕이 되어야 가능 한 것이기 때문에 이를 공부하면서 다시 CSS 개념을 되짚는 마음으로 본 포스팅을 작성합니다. 

 

애니메이션의 본질적인 학습을 위해서 레이아웃 배치에 관한 내용은 생략하겠습니다. 

 

애니메이션 제작 기본 방칙 ★★★

1. 시작 화면 제작 

2. 결과 화면 제작 

3. 시작화면에서 결과화면에서 넘어가는 방아쇠 (hover) 제작 

4. transition (서서히) 으로 효과 주기

 

 

오늘의 Target 

사용 되는 개념 1. hover : 사용자가 이미지에 마우스를 올렸을 때, 적용되는 Pseudo-class 2. opacity : 투명도 (0 : 안보임 <-> 1 : 잘보임)   3. position : absolute -> 요소를 붕 띄워서 이미지 위에 겹쳐 보이게 끔 해주는 역할   4. transition : all 1s; (1초에 걸쳐서 서서히 변화)

 

 

 

다음과 같은 웹사이트 내의 여행 패키지 상품들이 나열되었다고 가정할 때, 사용자는 이미지 위에 마우스를 올릴 것 입니다. 이때, 사용자가 이미지에 마우스를 올렸을 때 가격이 나오는 애니메이션을 학습하겠습니다. 

 

 

 

---

 

HTML 

 

맨 왼쪽 이미지에 대한 HTML 코드 입니다. 

<div class="content-box">
	<div style='position: relative'>
		<div class='wrap-img'>
			<p>30,000원</p>
		</div>
		<img src='../이미지파일/백두산product1.JPG'>
	</div>
</div>

위의 HTML은 다음과 같은 구조를 가지고 있습니다. wrap-img라고 클래스 명을 짓긴 했지만, 사실 감싸고 있는 것이 아닌, content-box내에 병렬적으로 겹쳐서 존재하고 있음을 알 수 있습니다. 

 

어? 겹쳐서 어떻게 존재하게끔 하지...?

답은 바로 position의 absolute 를 사용하면 됩니다. position의 absolute는 부모요소에 착 달라붙어서 겹치게 존재하는데요. 이를 위해서 상위 div 태그의 style 태그에 position : relative를 준 것입니다. 

 

---

 

CSS

 

.wrap-content {
    width : 100%;
    max-width: 1200px;
    padding: 20px;
    margin: auto;
    padding: 50px;
    background-color: #eee;
}

.content-box {
    float : left;
    width : 33.3%;
    padding: 50px;
}

.content-box img{
    width : 100%;
}

/* 결과화면을 제작한 후 투명도를 조정(안보이게) 
   즉, 시작 화면 */
.wrap-img {
    width : 100%;
    height : 100%; 
    position: absolute; /* 붕 띄우는 요소 */
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: all 0.5s; /*0.5 초에 걸쳐서 서서히 변화 */
}


/* 박스 내의 가격 폰트 */
.wrap-img p{
    text-align: center;
    color : white;
    padding-top: 45%;
    font-size : 20px;
}


/* hover : 방아쇠 역할(시작화면->결과화면) 으로 넘어가는 역할 */
.wrap-img:hover{

/* 즉, 결과 화면*/
    opacity: 1; 
}

---

포스팅 처음에 나열했던 원칙에 의거하면, 

1. 시작 화면 제작 & 4. transition (서서히) 으로 효과 주기

.wrap-img {
    width : 100%;
    height : 100%; 
    position: absolute;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    transition: all 0.5s;
}

▶ transition 

transition : all [서서히 몇 초?]

이것만 제대로 기억하면 꽤 괜찮은 애니메이션을 제작할 수 있습니다. 

 

 

2. 결과 화면 제작 & 3. 시작화면에서 결과화면에서 넘어가는 방아쇠 (hover) 제작 

.wrap-img:hover{
    opacity: 1; /*결과화면 : 투명도 1, 모두 보이게*/
}

 

 

 

애니메이션 효과라고 특별한 기술이 있는 것이 아닙니다.

기존에 알고있던 개념들을 확실하게 사용함과 동시에 transition : all [서서히 변경할 시간]s

을 사용하면 됩니다. 

그럼 다음 포스팅에서 봐요!