https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상
CSS
4. Animation
애니메이션 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 Sequence를 나타내는 키프레임(@keyframes)들로 이루어진다.
@keyframes
키프레임 rule을 사용하면 애니메이션 Sequence 중의 여러 시점(breakpoint)에서 CSS 프로퍼값을 지정할 수 있다.
<html>
<head>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
}
/* @keyframes rule */
@keyframes move {
/* keyframe */
from {
left: 0;
}
/* keyframe */
to {
left: 300px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>See the Pen Untitled by Byeongyeong Kim (@beark93) on CodePen.
animation-name
사용하고자 하는 keyframe 룰을 적용하기 위해 사용하는 프로퍼티. 하나 이상의 애니메이 이름을 지정할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
width: 100px;
height: 100px;
animation-name: move, fadeOut, changeColor;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes move {
from { left: 0; }
to { left: 300px; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes changeColor {
from { background-color: red; }
to { background-color: blue; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>See the Pen Untitled by Byeongyeong Kim (@beark93) on CodePen.
animation-duration
한 싸이클의 애니메이션에 소요되는 시간을 지정(s, ms). 지정하지 않을 경우 0s로 설정되어 애니메이션이 동작 X
animation-timing-function
애니메이 효과를 위한 수치 함수를 지정한다. animation-timing-function 설명
animation-delay
요소가 로드된 시점과 애니메이션이 시작하는 시점 사이에 대기하는 시간을 지정(s, ms)
animation-iteration-count
애니메이션 주기의 재생 횟수. 기본값은 1이고 infinite로 무한반복할 수 있다.
animation-direction
애니메이션이 종료된 이후 반복될 때 진행하는 방향을 지정.
- normal : 기본값으로 from에서 to로 진행
- reverse : to에서 from으로 진
- alternate : 홀수번째는 normal, 짝수번째는 reverse로 진행
- alternate-reverse : 홀수번째는 reverse, 짝수번째는 normal로 진
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: myAnimation 5s infinite;
/*홀수번째는 normal로, 짝수번째는 reverse로 진행*/
animation-direction: alternate;
}
@keyframes myAnimation {
0% { background: red; left: 0px; top: 0px; }
25% { background: yellow; left: 200px; top: 0px; }
50% { background: blue; left: 200px; top: 200px; }
75% { background: green; left: 0px; top: 200px; }
100% { background: red; left: 0px; top: 0px; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>See the Pen CSS Ani Exam3 by Byeongyeong Kim (@beark93) on CodePen.
animation-fill-mode
애니메이션 미실행 시(대기, 종료) 요소의 스타일을 지정한다.
| none | 대기 | 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다. |
| 종료 | 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다. | |
| forwards | 대기 | 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다. |
| 종료 | 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다. | |
| backwards | 대기 | 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다. |
| 종료 | 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다. | |
| both | 대기 | 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다. |
| 종료 | 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다. |
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
font: bold 1em/100px san-serif;
text-align: center;
color: #fff;
background: red;
margin-bottom: 10px;
position: relative;
/*name duration timing-function delay iteration-count direction fill-mode play-state*/
animation: myAnimation 2s linear 2s;
}
div:nth-of-type(1) {
animation-fill-mode: none;
}
div:nth-of-type(2) {
animation-fill-mode: forwards;
}
div:nth-of-type(3) {
animation-fill-mode: backwards;
}
div:nth-of-type(4) {
animation-fill-mode: both;
}
@keyframes myAnimation {
0% { left: 0px; background: yellow; }
100% { left: 200px; background: blue; }
}
</style>
</head>
<body>
<h1>animation-fill-mode</h1>
<div>none</div>
<p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.</p>
<p>종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.</p>
<div>forwards</div>
<p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하지 않고 대기한다.
<p>종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
<div>backwards</div>
<p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
<p>종료 : 애니메이션 실행 전 상태로 애니메이션 요소의 프로퍼티값을 되돌리고 종료한다.
<div>both</div>
<p>대기 : 시작 프레임(from)에 설정한 스타일을 적용하고 대기한다.
<p>종료 : 종료 프레임(to)에 설정한 스타일을 적용하고 종료한다.
</body>
</html>See the Pen CSS Ani Exam4 by Byeongyeong Kim (@beark93) on CodePen.
animation-play-state
애니메이 재생 상태를 지정한다. 기본값은 running.
https://poiemaweb.com/css3-animation - 참고
