css transition과 animation

웹사이트 레퍼런스를 찾다보면 화려한 애니메이션이 난무하는 사이트를 볼 수 있다.

항상 저런 액티브한 사이트를 만들고 싶다는 생각을 했는데

이번에 배운 css 애니메이션 기능으로 어느 정도 구현 해볼 수 있을 것 같다.

 

 

근데 막상 많은 애니메이션을 구현하다보니 css파일이 엄청 길어진다 ㅠ

 

 

---

css에서 애니메이션을 주는 방법은 2가지가 있다.

하나는 transition, 또 하나는 animation을 사용하는 방법이다.

 

transition

transition 단축 속성

트렌지션 사용방법은 간단하다. 

아래는 트렌지션 단축 속성으로 순서대로 해당하는 속성을 입력하면 된다.

/* transition: property duration timing-function delay */
.info {
	transition: all 0.5s ease-in-out 1s
}

 

transition의 각 속성

위에는 단축 속성 사용법으로 transition의 각 속성은 아래와 같다.

 

 

1. transition-property

트랜지션을 적용할 css 속성을 말한다. margin-right를 사용하여 오른쪽 마진을 주어 콘텐츠를 이동할 수도 있으며, color를 사용해 색깔의 변화도 줄 수 있다.

transition-property: margin-right, color;

 

 

2. transition-duration

트랜지션이 발생하는 시간을 말한다. 그러니까 1s를 지정하며 1초 내에 해당 효과가 변화된다. 단순히 컬러를 바꾸는 트렌지션이라면 1초에 거쳐 컬러가 서서히 바뀌는 것이다.

transition-duration: 2s

 

 

3. transition-timing-function

트랜지션이 변화하는 과정에 속도와 시간을 부여해서 애니메이션을 준다.

가장 무난하게 쓰기에는 ease-in-out 인 것 같다.

/* ease 시작할 때 빨라지다 느려진다 */
transition-timing-function: ease
/* linear 일정한 속도로 변화한다. */
transition-timing-function: linear
/* ease-in 천천히 시작했다가 속도를 높이며 끝난다 */
transition-timing-function: ease-in
/* ease-out 빠른 속도로 시작했다가 천천히 끝난다 */
transition-timing-function: ease-out
/* ease-in-out 천천히 시작했다가 정상 속도, 다시 빨라지며 끝난다  */
transition-timing-function: ease-in-out

 

4. transition-delay

트렌지션 효과가 실행되기까지 딜레이되는 시간이다. 만약 2s라면 2초 후에 트렌지션 효과가 시작된다.

transition-delay: 2s

 

위와 같은 속성을 단축 속성에 순서대로 적어 사용하면 된다.

---

animation

 

animation 사용법

애니메이션을 사용하기 위해서는 먼저 keyframes를 설정해줘야 한다.

원하는 애니메이션을 keyframes을 선언하여 만들어준다. 기본적으로 from과 to를 이용하여 시작과 끝을 정할 수 있지만, %를 활용할 수도 있다.

/* from to를 사용할 때 */
@keyframes colorTrans {
  from {
	color: white;
	font-size: 20px;
  }
  to {
	color: black;
	font-size: 40px;
  }
}
/* %를 사용할 때 */
@keyframes colorTrans {
  0% {
	color: white;
	font-size: 20px;
  }
  50%{
	color: gray;
	font-size: 30px;
  }
  100% {
	color: black;
	font-size: 40px;
  }
}

화이트 컬러에서 블랙으로, 폰트사이즈가 20px에서 40px로 변화되는 keyframes다. 이렇게 애니메이션을 만들었다면 css로 적용해주면 된다. animation을 사용하여 선언하면 된다. animation 단축속성은 아래와 같다.

animation: name duration timing-function delay iteration-count direction

예시로 사용한다면

.text_box p{
	animation: colorTrans 0.5s eaes-in 1s infinite alternate
}

 

animation 각 속성

속성은 transition 속성과 거의 동일하다.

 

1. animation-name

키프레임을 만들 때 지정했던 이름이다. 키프레임을 불러올 때 사용한다고 보면된다.

animation-name: colorTrans;

 

2. animation-duration

애니메이션이 작동하는 시간을 뜻한다.  2s라면 from부터 to까지 2초 동안 애니메이션이 작동한다.

animation-duration: 0.5s;

 

3. animation-timing-function

애니메이션이 시작하고 끝나는 동안의 가속에 대한 속성이다. 위의 transition에 정리된 내용과 동일하다.

animation-timing-function:ease-in;

 

4.animation-delay

애니메이션이 시작되는 시점이다. 2s라면 2초 후에 시작된다.

animation-delay: 2s;

 

5. animation-iteration-count

애니메이션이 반복되는 횟수이다. 무한으로 반복하고 싶다면 infinite를 사용하면 된다. 그렇지 않다면 반복 횟수를 숫자로 적으면 된다.

animation-iteration-count: 3;

 

6. animation-direction

애니메이션이 반복 될 때 재생 방향을 정의한다. 

/* 정방향으로 재생 */
animation-direction: normal;
/* 역방향으로 재생 */
animation-direction: reverse;
/* 정방향으로 재생 후 역방향으로 다시 재생 */
animation-direction: alternate;
/* 역방향에서 재생 후 정방향으로 다시 재생 */
animation-direction: alternate-reverse;

---

애니메이션과 트렌지션을 배우고나서 어떤 애니메이션이든 구현할 수 있을 것만 같았다.

하지만 막상 난이도 있는 애니메이션을 구현하고자 하니 자바스크립트가 필요하더라.

결국엔 자바스크립트를 열심히 공부하고 퀄리티 높은 사이트를 만들어볼까 싶다.