Animation
: 요소에 적용되는 CSS 스타일 다른 CSS 스타일로 부드럽게 전환시켜주는 것을 말한다. 이때 CSS 스타일 이 변화되는 중간 지점을 Keyframe이라고 말하며, @keyframes은 애니메이션의 중간 상태라고 할 수 있다. 애니메이션은 트랜지션보다 훨씬 더 규모가 크고 복잡하며, 다양한 능력을 가지고 있기 때문에 좀 더 정밀한 효과를 구현할 수 있다.
참고 사이트 : CoolCSSAnimation
Keyframes 정의하기
@keyframes으로 애니메이션을 정의할 수 있다.
📌 from (시작) ~to (끝) 를 잉용한 애니메이션 shape 생성
:
@keyframes shape {
from {
border : 1px solid transparent;
}
to {
border : 1px soild black;
border-radius : 50%;
}
}
📌 from ~ n% ~ to 를 이용한 애니메이션 생성
@keyframes shape-color {
from {
background-color : red ;
}
50% {
background-color : yellow ;
}
to {
background-color : blue ;
}
Animation 속성
animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름을 정의한다. @keryframes 규칙을 이용하여 기술한다.
animation-name : shape ;
... @keyframes shape
animation -duration : 지속시간
animation-delay : 지연시간
animation-iteration-count : 반복횟수. 만약 infinite로 설정하면 무한 반복한다.
animation-play-state : 멈추거나 다시 시작할 수 있다.
animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정한다.
animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정한다.
단일 속성으로 단축해서 사용할 수 있다.
ex) rotate 애니메이션, background 애니메이션 동시에 실행
animation : rotate 1.5 s infinte, background 1.5 s infinite alternate;
Loading Animation _ Full Code Example
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport" content = "width=device-width, initial-scale=quia" />
< title > Animation Loading </ title >
</ head >
< style >
body {
margin : 0 ;
padding : 0 ;
}
.circle {
width : 20px ;
height : 20px ;
background-color : blue ;
border-radius : 50% ;
position : absolute ;
animation : move-the-circle 1.5s infinite ;
}
.circle:nth-child ( 2 ) {
left : 30px ;
animation-delay : 0.1s ;
}
.circle:nth-child ( 3 ) {
left : 60px ;
animation-delay : 0.2s ;
}
.circle:nth-child ( 4 ) {
left : 90px ;
animation-delay : 0.3s ;
}
.circle:nth-child ( 5 ) {
left : 120px ;
animation-delay : 0.4s ;
}
.circle:nth-child ( 6 ) {
left : 150px ;
animation-delay : 0.5s ;
}
.circle:nth-child ( 7 ) {
left : 180px ;
animation-delay : 0.6s ;
}
.circle:nth-child ( 8 ) {
left : 210px ;
animation-delay : 0.7s ;
}
@keyframes move-the-circle {
0% {
transform : translate ( 0 , 0 ) scale ( 1 );
background-color : blue ;
}
50% {
transform : translate ( 0 , 50px ) scale ( 0.5 );
background-color : rgb ( 40 , 224 , 248 );
}
100% {
transform : translate ( 0 , 0 ) scale ( 1 );
background-color : blue ;
}
}
</ style >
< body >
< div class = "animation-wrapper" >
< div class = "circle" ></ div >
< div class = "circle" ></ div >
< div class = "circle" ></ div >
< div class = "circle" ></ div >
< div class = "circle" ></ div >
< div class = "circle" ></ div >
< div class = "circle" ></ div >
< div class = "circle" ></ div >
</ div >
</ body >
</ html >
댓글