1. Animation
- 이전 포스팅에서 언급했던 Transition과 Transformation은 특정 행동과 같은 발동 조건을 기반하여 상태의 변화를 animation으로 표현하는 방법이었다.
- 이와 다르게, animation은 아무 조건없이 계속적으로 작동되는 것을 의미한다. 그렇다면 예시를 통해서
예시 1) x축을 기준으로 360도 회전하는 animation
<style>
@keyframes coninFlip {
/* anotation + 애니메이션 이름 지정*/
/*animation 사용 첫번째 조건 - 시작과 종료지점을 정의*/
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg);
}
}
img {
border: 5px solid black;
border-radius: 50%;
animation: coninFlip 3s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="logo.png"/>
</body>
[Animation 작성 방법 - 위의 코드를 참고하세요.]
1. @keyframes 어노테이션을 부여하고 animation이름을 정의한다.
2. animation의 시작과 끝을 정의한다.
3. 정의한 animation이 적용할 엘리먼트에 animation 속성을 정의한다. 적용할 수 있는 속성값은 아래와 같다
- 위의 코드에서 infinite이라는 부분이 timing-function을 의미하고 이는 애니메이션이 무한대로 실행되며 3초마다 한번씩 애니메이션이 실행됨을 의미한다.(애니메이션 동작 시간이 3초이기 때문)
예시 2) transition의 여러가지 속성값을 조합하여 만든 animation(코드 필독)
<style>
@keyframes coninFlip {
/* anotation + 애니메이션 이름 지정*/
/*animation 사용 첫번째 조건 - 시작과 종료지점을 정의*/
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(360deg) translateX(200px);
}
}
img {
border: 5px solid black;
border-radius: 50%;
animation: coninFlip 3s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="logo.png"/>
</body>
- 위의 움짤(GIF)를 보면 움직임이 부자연스럽다. 왜냐면 x축으로 200픽셀만큼 이동하게 했으나 animation이 끝남과 동시에 그림이 제자리로 돌아가기 때문이다. 자연스럽게 animation이 끝난 그 지점에서 다시 돌아가는 방식으로 만들 수는 없을까?
- 이걸 하기 위해서는 animation에 절차 또는 단계를 적용하면 된다.
예시 3) 예시 2번에서 만든 애니메이션을 자연스럽게 만드는 방법 (단계적용 / 코드 필독)
<style>
@keyframes coninFlip {
/* anotation + 애니메이션 이름 지정*/
0% {/*애니메이션 시작*/
transform: rotateX(0deg);
}
50% {/*애니메이션 중간*/
transform: rotateX(180deg) translateX(200px);
}
100% {/*애니메이션 끝*/
transform: rotateX(0deg);
}
}
img {
border: 5px solid black;
border-radius: 50%;
animation: coninFlip 3s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="logo.png"/>
</body>
- 위의 코드에서 보이는 것과 같이 from/to를 사용하지 않고 0%/50%/100%를 이용하여 애니메이션의 진행 단계를 정의한다. 이렇게 설정해 놓으면 0%에서 100%로 갔다가 다시 100%에서 0%로 역순으로 transition/transform 요소들이 작동되는 것이다.
- animation의 단계는 개발자가 원하는 만큼 나눌 수 있다. 간격을 좁게, 여러 단계를 만들수록 다이나믹한 animation을 만들 수 있다. 단계가 많아질수록 적용할 수 있는 transform/transition 속성의 종류가 다양해지기 때문이다.
예시 3) 25%간격으로 애니메이션 만들기(단계적용 / 코드 필독)
<style>
@keyframes coninFlip {
/* anotation + 애니메이션 이름 지정*/
0% {
transform: rotateX(180deg) translateY(-300px);
border: 5px solid black;
}
25% {
transform: translateX(300px);
border: 20px solid black;
}
50% {
transform: rotateX(180deg);
border-color: tomato;
}
75% {
transform: translateX(300px) translateY(300px);
border: 20px solid black;
}
100% {
transform: rotateX(180deg) translateY(-300px);
border: 5px solid black;
}
}
img {
border: 5px solid black;
margin-top: 500px;
margin-left: 200px;
border-radius: 50%;
animation: coninFlip 4s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="logo.png"
</body>
- 위의 움짤(GIF)처럼 단순히 transition과 transform 이외에 상태를 변화시키는 속성들을 이용해서도 animation을 만들 수 있다. 더욱 다양하고 화려한 animation을 사용해보고 싶다면 아래의 링크에 들어가서 찾아보길 바란다.
developer.mozilla.org/en-US/docs/Web/CSS/animation
animation
The animation shorthand CSS property applies an animation between styles.
developer.mozilla.org
Animate.css
Animate.css v4 brought some breaking changes, please refer to the migration guide before updating from v3.x and under. Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders,
animate.style
animista.net/play/basic/shadow-inset
Animista
Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.
animista.net
'Front-end > HTML + CSS' 카테고리의 다른 글
| HTML/CSS - 꿀팁(Tips) (0) | 2020.09.11 |
|---|---|
| HTML/CSS - Media Query(반응형 웹사이트 만들기) (0) | 2020.08.30 |
| HTML/CSS - Transition & Transformation (0) | 2020.08.30 |
| HTML/CSS - CSS Variable (0) | 2020.08.27 |
| HTML/CSS - State & 속성 선택자(selector) (0) | 2020.08.26 |
댓글