밀고나오는 글자 애니메이션

안녕하세요 오늘은 애니메이션에 대해서 배워보겠습니다.

 

오늘은 오른쪽에서 갑자기 글자가 밀고들어오는 움직이는 애니메이션을 만들어볼게요

 

먼저 animation 속성에 대해서 알아보겠습니다.

 

애니메이션을 적용하는 방법은 먼저[ @keyframes: 지정한 이름] 를 활용해서 효과를 먼저 만들어주면 됩니다.

저는 옆에서 밀고 들어오는 애니메이션을 적용하기 위해서  animation을 이름으로 해서

 

magin-left 와 width로 설정해보겠습니다.

 

@keyframes animation{
    0%{
        margin-left:100%;
        width:300%;
    }
    100%{
        font-size: 300%;
        margin-left:0;
        width:100%;
    }

}

 

 

 

0% ~ 100% 는 내가 설정해놓은 애니메이션 시간이 만약 3초라면 3초가 되기까지를 퍼센트로 나타낸다고 보면됩니다.

만약 50%에서 width:100%로 설정했다면 1.5초 지점에서 width:100%효과를 나타내줘 라는 뜻입니다.

 

 

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

 

 

 

이제 애니메이션을 만들었다면 적용하고 싶은 태그에다가 적용시켜줘야합니다.

 

css로 스타일을 애니메이션으로 적용을 시켜주면 되는데 그러기 위해서 애니메이션 스타일을 지정해주는

css속성에는 무엇이 있는지 알아보겠습니다.

 

먼저 지정하기위해서 animation:지정된 이름 설정시간 ; 을 사용하여 지정해주면 적용이 되는 것을 볼 수 있습니다.

2s는 2초로 애니메이션을 실행하라는 뜻입니다.

 

 

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

 

 

그런데 너무 매끄럽지않게 실행됩니다. 그래서 반대로도 실행되어 매끄럽게 왔다갔다 할 수 있게 

애니메이션이 끝났을 때 반대방향으로 이동하도록  animation-direction 속성을 alternate로 지정해보겠습니다.

 

 

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

 

 

이번에는 한번만 실행되기때문에 여러번 실행되도록 animation-iteration-count: 숫자 or infinite(무한)을

지정하여 적용해보겠습니다.

 

 

See the Pen 글자밀고나오기 에니메이션 by 박지연 (@qwer273) on CodePen.

 

 

이밖에도 더 다양한 에니메이션 속성들이 있어서 다양한 에니메이션 지정이 가능합니다.

정말 간단하지않나요??

 

여기까지 에니메이션 효과를 알아보았습니다.