CSS 쉽게 배우기 | CSS만으로 애니메이션 만들어 봤니?

CSS만으로 재밌는 애니메이션 만들기

안녕하세요

오늘은 CSS편의 마지막으로 애니메이션을 알아볼게요

CSS로 애니메이션이라...

디즈니 같은 애니메이션은 아니지만

재미있는 웹사이트를 만들기는 충분하죠

CSS의 애니메이션을 쉽게 이해하는 방법은 플립북 애니메이션을 생각하시면 됩니다

여러 장의 종이를 사용하는 대신에 CSS 애니메인션에서는 "xx부터 xx까지"라는 콘셉트를 사용합니다

이 범위안에서 요소의 스타일과 애니메이션의 반복, 그리고 속도를 조절하는 거죠

애니메이션을 사용하려면 애니메이션을 넣고 싶은 요소에 애니메이션 속성들을 정하고

키 프레 임안에 바꾸려는 스타일들을 작성하면 됩니다

 

애니메이션 속성들 알아보기

애니메이션에 필요한 속성들로는

• animation-name (애니메이션 이름)
• animation-duration (애니메이션 지속 시간)
• animation-direction (애니메이션 방향)
• animation-timing-function (애니메이션 속도 곡선)
• animation-delay (애니메이션 지연 시간)
• animation-iteration-count (애니메이션 반복 수)

이렇게 있습니다

이 외에도 몇 가지 더 있는데 일단은 기본적인 것들만 알아볼게요

 

animation-name

당연히 애니메이션의 이름을 정할 수 있어야겠죠?

그래야 어떤 애니메이션을 어디에서 사용하는지 알 수 있으니까요

애니메이션 이름은 원하는 이름으로 하세요

div { animation-name: myanimation; }

 

animation-duration

애니메이션 지속 시간은 처음부터 끝까지 얼마나 걸리는지를 정합니다

3s는 3초, 0.5s는 0.5초

이런 식으로 시간을 정하면 됩니다

div { animation-duration: 3s; }

 

animation-direction

애니메이션 방향은 말 그대로 어떤 방향으로 애니메이션이 플래이 될지를 정합니다

값으로는

• normal (앞으로)
• reverse (뒤로)
• alternate (앞뒤 번갈아 가기)
• alternate-reverse (번대로 번갈아 가기)

div { 
	animation-direction: normal; 
    animation-direction: reverse; 
    animation-direction: alternate; 
    animation-direction: alternate-reverse; 
}

 

animation-timing-function

이 속성은 애니메이션 움직임의 속도를 정할 때 사용합니다

이 속성에 사용할 수 있는 값은 6개가 있습니다

• linear 처음부터 끝까지 같은 속도로 움직입니다
• ease 이 속성의 기본값으로 느리게 시작해서 빨라지다가 느리게 끝납니다
• ease-in 애니메이션이 느리게 시작합니다
• ease-out 애니메이션이 느리게 끝납니다
• ease-in-out 애니메이션이 느리게 시작하고 느리게 끝납니다
• cubic-bezier(x1, y1, x2, y2) 애니메이션의 속도를 직접 조절할 수 있습니다. ( ) 안에 0부터 1까지의 값을 넣어서 나만의 속도를 만들수 있습니다 x1 과 x2는 반드시 0 부터 1 까지여야 합니다

div {
    animation-timing-function: linear; 
    animation-timing-function: ease; 
    animation-timing-function: ease-in; 
    animation-timing-function: ease-out; 
    animation-timing-function: ease-in-out; 
    animation-timing-function: cubic-bezier(.28,-0.37,.33,.97); 
}

 

animation-delay

이 속성은 애니메이션의 시작을 늦추는 속성입니다

주어진 시간만큼 기다렸다가 그 후에 애니메이션을 시작합니다

div {
    animation-delay: 3s; //3초
    animation-delay: 0.5s; //0.5초후
    animation-delay: 500ms; //0.5초후
}

 

animation-iteration-count

이 속성은 애니메이션이 몇 번 플레이될지를 정합니다

기본으로 모든 애니메이션은 1번 플레이되는데

이 속성을 사용하면 여러 번 반복할 수 있습니다

속성의 값으로는 숫자를 사용하거나, 무한반복을 사용할 수 있습니다

div {
    animation-iteration-count: 5; //5번 플레이
    animation-iteration-count: infinite; //무한 반복
}

 

 

자 애니메이션에 필요한 속성들을 알아봤는데요

이제 제일 중요한 한 가지만 더 알면 여러분들도 멋진 CSS 애니메이션을 만들 수 있습니다

그것은 바로 키프레임 이란 법칙입니다

 

@keyframes

이 법칙은 애니메이션에 생명을 불어넣어 줍니다

비교하자면 플립북을 조절하는 엄지손가락과 같다고 할 수 있겠네요

이 법칙을 사용하는 방법은 간단합니다

시작점과 끝나는 점을 정하고

시작하는 스타일과 끝나는 스타일을 정하면 됩니다

코드로 볼게요

@keyframes myanimation { //myanimation은 애니메이션의 이름입니다
    from{ //시작
        width: 400px;  //애니메이션 시작 전의 스타일
    }
    
    to{ //끝
        width: 800px; //애니메이션이 끝난후의 스타일
    }
}

@keyframes myanimation2 { //myanimation2는 애니메이션의 이름입니다
    0%{ //시작
        width: 400px;  //애니메이션 시작 전의 스타일
    }
    
    100%{ //끝
        width: 800px; //애니메이션이 끝난후의 스타일
    }
}

퍼센트를 사용할 때는 0%부터 100% 까지 사용할 수 있고

단계별로 나눌 수 있습니다

예를 들어서 0%, 25%, 50%, 75%, 100% 이렇게 말이죠

 

정말 정말로 마지막 하나 더!

위에서 본 애니메이션 속성들 있죠?

작성해야 하는 속성들이 한두 개가 아닌데요

이렇게 따로따로 할 필요 없이 한 번에 작성하는 방법이 있습니다

 

animation

이 속성은 위에서 본 모든 애니메이션 속성들을 한번에 작성할 수 있는 지름길입니다

속성 사용 방법은 다음과 같습니다

div {
    animation: 이름 지속시간 timing-function 지연시간 반복횟수 방향;
}

div {
  animation: grow 1s ease infinite;
}

코드에서 볼 수 있듯이 애니메이션의 모든 속성의 값을 전부다 제공할 필요는 없습니다

예시 코드에 지연시간과 방향이 없는 걸 볼 수 있는 데요

이 경우에는 자동으로 기본값을 사용합니다

 

 

자! 그러면 이 모든 걸 사용한 예시를 볼게요

 

 

 

 

 

 

 

 

애니메이션 속성과 키프레임으로 재미있는 애니메이션을 만들어 보세요

만든 애니메이션을 자랑하고 싶으신 분들은 댓글 남겨주세요

 

 

오늘도 수고하셨습니다

 

끝!