1. 애니메이션
트랜지션과 비슷하지만 수도 클래스를 사용하지 않고 적용할 수 있다는 점에서 차이점이 있다.
특정 지점을 변경 지점(keyframe)으로 잡아 일정한 스타일의 변화를 주게 된다.
2. @keyframes 속성 : 애니메이션 변경 지점 설정하기
@keyframes <keyfram의 이름 지정> {<선택자 from | to | 백분율> {<스타일>}}
애니메이션은 진행율에 따라 0% 부터 100%까지 지정되며 세부 지점을 따로 지정할 수 있다.
또는 from(0%) , to(100%) 로도 지정이 가능하다.
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
animation-name: change-bg;
animation-duration: 3s;
}
@keyframes change-bg {
0% {
background-color: blue;
border: 1px solid black;
}
100% {
background-color: #a5d6ff;
border: 1px solid blue;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div></div>
</body>위의 예시는 진행율이 0% 즉 시작할 때에는 배경 색상이 파란색에 테두리가 검정색이고 형태는 사각형으로 시작한다.
하지만 애니메이션이 3초간 진행이 되면서 100% 로 향해갈 때에 배경 색상은 하늘색에 테두리는 파란색 형태는 원형으로 변형이 되고 애니메이션이 끝나면 원래의 모양으로 돌아가게 된다.
3. animation-name 속성 : 애니메이션 이름 지정하기
animation-name : <키프레임 이름> | none
위의 예시에서도 사용했듯이
애니메이션의 변경되는 사항을 제대로 지정하기 위해서는 지정할 대상에게 keyframe 을 알려줘야 한다.
자신이 어떠한 변경 지점을 가지고 애니메이션을 적용할지는 바로 이 animation-name 속성에 지정되는 keyframe 의 이름으로 알게 되는 것이다.
4. animation-duration 속성 : 애니메이션 실행 시간 설정하기
animation-duration : <시간>
animation-duration 은 필수적으로 작성해야 하는 속성 중 하나인데,
이를 작성하지 않으면 기본값이 0s 로 지정되어 애니메이션이 실행하지 않게 된다.
5.animation-direction 속성 : 애니메이션 방향 지정하기
animation-direction : normal | alternate | reverse | alternate-reverse
1️⃣ normal : 기본값으로 애니메이션 실행을 마치면 원래 스타일로 돌아간다.
2️⃣ alternate : 애니메이션 실행을 마치면 실행했던 스타일에서 원래 스타일로 되돌아간다.
3️⃣ reverse : 실행 마지막에서부터 시작하여 시작 스타일로 돌아간다.
4️⃣ alternate-reverse : 애니메이션 시작에서 마지막으로 실행하고 다시 마지막에서 시작으로 실행한다.
이 속성으로는 진행의 방향성을 조절할 수 있게 된다.
기본적인 방향성은 시작 👉 마지막이지만, 마지막 👉 시작 으로 변화를 줄 수도 있게 된다.
하지만 되돌아가는 등의 애니메이션 실행은 횟수가 2회 이상이어야 확인할 수 있기 때문에
반드시 animation-iteration-count 속성과 함께 사용해야 한다.
6. animation-iteration-count 속성 : 반복 횟수 지정하기
animation-iteration-count : <반복 횟수> | infinite
기본값은 0으로 방향성에 있어서 단방향 진행을 하게 되기 때문에 되돌아가는 등의 진행은 반복을 해야 한다.
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
animation-name: change-bg;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes change-bg {
0% {
background-color: blue;
border: 1px solid black;
}
100% {
background-color: #a5d6ff;
border: 1px solid blue;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div></div>
</body>이렇게 작성하게 되면 alternate 값으로 인하여 시작 👉 마지막, 마지막 👉 시작으로의 변화를 살펴볼 수 있다.
사각형에서 원형으로 원형에서 다시 사각형으로 무한히 변형된다.
7. animation-timing-function 속성 : 애니메이션 속도 곡선 지정하기
animation-timing-function : linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(x, y, x, y)
애니메이션에서도 트랜디션과 마찬가지로 진행에 따른 속도를 곡선 그래프로 지정할 수 있고, 사용 방법도 동일하다.
📌 animation 속성 한 번에 표기하기
animation : <animation-name> | <animation-duration> | <animation-timing-function> | <animation-delay> |
<animation-iteration-count> | <animation-direction>
이 속성 중 duration 속성은 반드시 작성되어야 한다.
duration 속성 값의 기본값은 0 이기 때문에 지정해주지 않으면 애니메이션 효과가 진행되지 않는다.
속성에 따라 keyframe 을 따로 지정하였다면, keyframe 별로도 애니메이션 효과를 개별적으로 지정할 수 있고
구분은 쉼표로 가능하다.
<style>
.box {
width: 60px;
height: 60px;
margin: 60px;
background-color: aquamarine;
animation: rotate 1.5s infinite, background 1.5s infinite alternate;
}
@keyframes rotate {
from {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
}
50% {
transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
}
to {
transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
}
}
@keyframes background {
from {
background-color: red;
}
50% {
background-color: green;
}
to {
background-color: blue;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
'CSS' 카테고리의 다른 글
| CSS Diner : selector 연습하기 (11 ~ 20번) (1) | 2022.10.30 |
|---|---|
| CSS Diner : selector 연습하기 (1 ~ 10번) (0) | 2022.10.30 |
| transition : 전환 (0) | 2022.10.28 |
| transform : 변형 (0) | 2022.10.28 |
| 가상 클래스와 가상 요소 (0) | 2022.10.26 |
