이번 포스팅에서는 CSS속성 중에서 Animation에 대해서 알아보도록 하겠습니다!
우선 CSS에서 애니메이션을 사용하려면 사용하려는 대상이 있어야겠죠? 그리고 그 대상에 어떤 애니메이션을 줄 것인지가 지정되어야 합니다.
그래서 링크방식을 사용하려면 HTML에서 요소를 선택해서 그 안에 animation-name:입히고 싶은 애니메이션 이름;이 있어야하고, 해당 CSS파일 내에 @keyframe 입히고 싶은 애니메이션이름{...} 이렇게 두 줄이 필수적으로 있어야 합니다!
또한 animation속성에는
이런 것들이 있습니다! 코드로 하나하나 알아보도록 할게요!
우선 이렇게 3가지 요소들에 애니메이션을 입혀보도록 할 건데요..!
box요소부터 알아보도록 하겠습니다!
box를 클래스로 갖는 요소에는 우선
이렇게 스타일을 지정해주었구요, 'my-anim'이라는 애니메이션을 주도록 해 보겠습니다!
그러면 CSS파일에서 @keyframe my-anim{...}이 선언되어 있어야 겠죠?
저는 my-anim을 이렇게 만들어 보았습니다!
여기에서 %는 한번 지속되는 동안의 몇 퍼센트일때 어디에 위치하는지를 정해준거라고 보면 됩니다! 위의 CSS파일에서의 코드를 살펴보면 처음 시작일 때는 box가 원래 있어야 하는 위치에서 왼쪽으로 0px, 25%지점일 땐 왼쪽에서부터 200px, 50%지점일 땐 왼쪽으로부터 400px, 75%지점일 땐 왼쪽으로부터 200px(25%일때의 위치와 같죠?), 100%지점일때는 0px로 to~from까지 제자리로 돌아오는 그런 애니메이션이라 볼 수 있습니다!
@keyframe은 사용자 지정 애니메이션이기 때문에 여러분이 만들고자 하는 애니메이션이 있다면 자유롭게 만들어 볼 수 있어요.
그러면 이제 선택된 box를 클래스로 갖는 요소에 입힌 스타일에 animation의 다양한 속성에 대해서 알아보도록 하겠습니다!
저는.box{}안에 이렇게 my-anim이라는 애니메이션의 속성을 부여해 보았습니다!
animation-duration:2s;는 애니메이션 지속시간이 2초라는 거겠죠?
animation-delay:는 페이지가 로드된 후 얼마나 지나서 애니메이션이 시작될 것인지를 정하는 속성입니다. 그럼 이 애니메이션의 경우에는 페이지가 로드된 후 1초가 지나서 애니메이션에 시작되겠죠?
animation-iteration-count:은 애니메이션을 얼마나 반복할 것인지를 지정하는 거에요. infinite라고 지정했으니 페이지를 종료할때까지 얘는 반복되고 있겠죠...
animation-timing-function:은 중간상태들의 전환을 어떤 시간 간격으로 할 지를 정하는거에요!
종류에는 inear, ease, ease-in, ease-out, ease-in-out 등이 있는데 미리 알고 써도 좋지만 이들을 주석처리해서 하나씩 적용해보고 마음에 드는 것을 사용하는 것이 좋다고 합니다.
Ceaser - CSS Easing Animation Tool - Matthew Lein
Ceaser - CSS Easing Animation Tool - Matthew Lein
Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it. When you’re happy, snag your code and off you go. Now that we can use CSS transitions in all the modern browsers, let’s make them
matthewlein.com
이 사이트를 참고하면 animation-timing-function을 시각적으로 확인하기 좋으니, 한번 참고해서 웹페이지를 만들어 보는 것도 좋겠죠?
그럼 다른 속성들도 알아보기 위해 다른 요소들에도 애니메이션을 만들어서 입혀보도록 하겠습니다.
bounce-ball1이라는 클래스를 갖는 요소에 이렇게 스타일을 입히고 bounce1이라는 애니메이션을 입혀보도록 할 건데요.!
bounce1애니메이션은 이렇게 지정해보았습니다.
처음 시작은 원래 있어야 하는 위치에서 위에서 50px 떨어진 위치에서 시작하고 마지막은 위로부터 300px떨어진 위치에서 끝나는 그런 애니메이션이네요.
bounce1이니까 땅에 떨어져서 다시 위로 튀어 올라야하죠? 그런데 이거 어떻게 하면 좋을까요??
animation-direction:을 통해서 할 수 있습니다!
여기에서는 alternative로 설정되어 있죠?
alternative는 반복될 때마다 방향을 바꿔줍니다. 그럼 처음 시작할때는 to->from이었으니 두번쨰는 from->to 방향으로 가는거😁😁
anmation-direction에는 nomal, alternative, alternative-reverse가 있습니다. 여기에서 nomal은 거의 쓸 일이 없고, alternative-reverse는 우리가 애니메이션을 to->from으로 진행방향을 설정해 준거잖아요? 그런데 얘는 시작을 반대부터 시작하게 하는 겁니다! 그럼 진행방향이 alternative로 했을때랑 완전 반대로 되겠죠!
마지막으로 bounce-ball2를 클래스로 갖는 요소에 스타일을 입히고 애니메이션을 지정해보도록 하겠습니다.
이렇게 bounce2라는 애니메이션을 입혔고 무한하게 반복되며 애니메이션이 한번 반복되는데 걸리는 시간은 1초로 해 보았습니다!
애니메이션을 만들때에는 이렇게 시작점과 끝점이 같다면 from,to{안에 다양한 속성들..}이렇게 만들 수 있고 {}안에는 animation에 대한 속성도 넣을수 있어요..!
짜잔! 이런 애니메이션을 갖는 페이지를 만들어 보았습니다!
다음 포스팅부터는 javascript를 정리해보도록 하겠스니다.. 그럼 이만...😵💫
'[새싹X코딩온]웹 풀스택' 카테고리의 다른 글
| [새싹X코딩온]웹 풀스택 4주차(8/7)회고록|서버구축하기 (0) | 2023.08.11 |
|---|---|
| [새싹X코딩온]웹 풀스택 2주차(7/24)회고록|JavaScript(1)-html파일에 JS불러오는 방법 및 기본문법(형변환까지) (1) | 2023.08.06 |
| [새싹X코딩온]웹 풀스택 2주차(7/24)회고록|CSS(7)-display (0) | 2023.08.02 |
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(6)-transform,overflow (0) | 2023.07.28 |
| [새싹X코딩온]웹 풀스택 1주차(7/21)회고록|CSS(5)-position (0) | 2023.07.27 |
