<Today's Goals>
- 애니메이션 속성을 이해한다.
- 애니메이션을 이용해 요소를 이동시킨다.
- 애니메이션을 이용해 시간차 효과를 줄 수 있다.
- 애니메이션을 이용해 움직임의 속도를 조절할 수 있다.
<What i learned>
- %단위로 키프레임을 지정할 수 있다. 이를 이용해 더 동적인 무빙을 만들어낼 수 있다.
<Questions>
- 애니메이션을 반복할 경우, animation-delay 가 처음에만 적용되는데, 반복 될 때마다 지연되도록하는 방법은?
애니메이션이란?
CSS3의 animation 속성을 사용하여 자바스트립트나 플래시 없이 웹요소에 애니메이션을 추가할 수 있다.
Keyframes : 애니메이션이 바뀌는 지점을 @keyframes 속성을 이용해 정의.
from : 애니메이션의 시작 프레임를 설정함
to : 애니메이션의 끝 프레임를 설정.
@keyframes keyframesName {
from {
transform: translate(30px, 20px)
}
to {
transform: translate(100px, 0)
}
}중간의 키프레임을 %단위로 지정할 수 있음
@keyframes keyframesName {
0% {
transform: translate(0, 0)
}
30% {
transform: translate(30px, 20px)
}
70% {
transform: translate(130px, 70px)
}
100% {
transform: translate(100px, 0)
}
}
에니메이션 종류
- animation-name : 애니메이션 이름을 지정
- animation-delay : 애니메이션 지연시간을 지정 (애니메이션이 반복될 경우 처음에만 적용)
- animation-direction : 애니메이션 진행방향 지정 (alternate : 왔던대로 되돌아감/ normal : 원래방향으로)
- animation-duration : 애니메이션 실행시간을 지정
- animation-iteration-count : 애니메이션 반복 회수를 지정
- animation-play-state : 애니메이션 재생상태를 지정 (paused 정지)
- animation-timing-function : 애니메이션 속도 곡선 지정
속도 곡선 종류
- linear : 시작부터 끝까지 똑같은 속도로 진행
- ease : 처음은 천천히 시작하고 점점 빨라지다가 마지막엔 천천히 끝남
- ease-in : 시작을 느리게
- ease-out : 느리게 끝남
- ease-in-out : 느리게 시작하고 느리게 끝남
- cubic-bezier : 직접 베이직 함수를 정의해서 사용 / n에서 사용할 수 있는 값은 0~1사이
한번에 표시하기
animation: 이름 | 시작지연시간 | 재생속도 | 재생시간 | 반복횟수 | 진행방향
애니메이션 적용 예시
<style>
*{ margin: 0; padding: 0;}
.box01{ width: 100px; height: 100px;
position: absolute; top: 0; left: 0;
background-color: darkgray;
animation-name: ani01;
animation-delay: 1s;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes ani01{
from{ /*0%*/
position: absolute; top: 0; left: 0;
}
30%{
width: 100px; height: 100px;
background-color: darkred;
position: absolute; top: 500px; left: 100px;
}
60%{ width: 300px; height: 100px;
background-color: blueviolet;
position: absolute; top: 100px; left: 500px;
}
80%{ width: 200px; height: 200px;
background-color: aquamarine;
position: absolute; top: 300px; left: 1000px;
}
to{ /*100%*/
background-color: chartreuse;
position: absolute; top: 700px; left: 900px;
}
}
</style>
</head>
<body>
<div class="box01">box01</div>
</body>
728x90
'Language > CSS' 카테고리의 다른 글
| CSS display 속성 (0) | 2022.05.08 |
|---|---|
| CSS속성 transition 시간에 따른 속성 적용 (0) | 2022.05.06 |
| CSS border 여러 속성 (0) | 2022.04.24 |
| CSS 인라인 요소 , 블록레벨 요소 (0) | 2022.04.22 |
| CSS gradient 속성 (0) | 2022.04.19 |
