- 17일차 프론트엔드 공부 -
animation
여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법
CSS을 이용해서 애니메이션을 만드는 방법
1. transition 속성 활용
2. animation 속성과 keyframe 활용
transition / animation 차이
transition
특정한 이벤트를 기점으로 작동한다. (hover 등)
animation
시작하기 위한 이벤트가 없다.
시작, 정지, 반복까지 제어할 수 있다.
animation
@keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어 해주어야 한다.
즉 하나의 동작을 만들기 위해서 1개의 keyframe 1개, 애니메이션 속성 1개가 만들어야 한다.
transition이 사용하기 더 간편하기 때문에 애니메이션을 만들 때 주로 transition을 이용하여 만들고, transition을 통해 만들 수 없는 경우 animation과 keyframes을 사용한다.
keyframes
CSS 애니메이션의 시작, 중간, 끝 등의 중간상태를 정의한다.
@keyframes 애니메이션 이름 {
시작 시점의 CSS
종료 시점의 CSS
}
ex)
@keyframes moveRight {
from {
left: 0;
}
to {
left: 200px;
}
}
from 과 to 대신 진행도(%) 표기도 가능하다.
animation 관련 속성들
animation-name
animation-duration
animation-direction
animation-iteration-count
animation-timing-function
animation-delay
animation-name
어떠한 keyframes를 요소에 적용할 것인지 지정합니다.
animation-name: moveRight
animation-duration
애니메이션을 한 번 재생하는데 걸리는 시간을 설정합니다.
animation-duration: 2s
animation-direction
애니메이션 재생 방향을 정의 합니다. (정방향/역방향)
animation-direction: alternate / normal / reverse / alternate-reverse
normal : 정방향으로 재
reverse : 역방향으로 재생
alternate : 정방향으로 재생 (단, 정방향/역방향을 번갈아 재생)
alternate-reverse : 역방향으로 재생 (단, 역방향/정방향을 번갈아 재생)
animation-iteration-count
애니메이션 재생 횟수를 정의 합니다.
animation-iteration-count : infinite / 3
animation-timing-function
애니메이션 재생 패턴을 정의하며, transition-timing-function과 유사함
animation-timing-function : ease-in-out
animation-delay
애니메이션 시작을 얼마나 지연할 지 설정합니다.
animation-delay: 2s
animation 단축 속성
animation: name duration timing-function delay iteration-count direction
animation: moveRight 0.4s linear 1s infinite alternate
animation 실습
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="container">
<div class="item">
<span>item</span>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.container {
width: 100%;
height: 104px;
border: 2px solid red;
position: relative;
}
.item {
width: 100px;
height: 100px;
background: blue;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
animation: moveBox 2s ease-in-out infinite alternate;
position: absolute;
}
.item span {
color: white;
}
@keyframes moveBox {
from {
border-radius: 0;
left: 0;
background: blue;
transform: scale(1);
}
to {
border-radius: 50%;
left: calc(100% - 100px);
background: green;
transform: scale(0.5);
}
}
'프론트엔드 공부 > CSS 기초' 카테고리의 다른 글
| 19일차 프론트엔드 공부 - 반응형 웹 (0) | 2024.09.24 |
|---|---|
| 18일차 프론트엔드 공부 - grid (0) | 2024.09.23 |
| 16일차 프론트엔드 공부 - transform (0) | 2024.09.21 |
| 15일차 프론트엔드 공부 - 함수, position, transition (0) | 2024.09.19 |
| 14일차 프론트엔드 공부 - 폰트, 단위 (0) | 2024.09.12 |