@keyframes? 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 한다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있다.
animation-name 을 개발자가 직접 정한다!
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
위의 출처 : mdn @keyframes
▪️ 아래는 내가 만든 @keyframes
.modal{
animation-name : modalopen;
animation-duration : 0.3s;}
@keyframes modalopen{
from{
opacity :0
} to {
opacity : 1;
}
}
▪️ Rotate animation - play class 가 생기면 360도 회전하는 animation
.img-container img {
animation : rotate 3s infinitel
animation-play-state : paused;}
.music-container.play .img-container img{
animation-play-state : running}
@keyframes rotate{
from{
transform:rotate(0deg);
}to{
trasform:rotate(360deg);
}}
▪️ bounce animation 만들기 : 세 원으로 이루어진 loader에 bounce 효과 주기
HTML)
<div class='loader'>
<div class = 'circle'></div>
<div class = 'circle'></div>
<div class = 'circle'></div>
</div>
CSS)
.loader{
opacity : 0;
display : flex;
position : fixed;
bottom : 50px;
transition : opacity 0.3s ease-in; }
.loader.show{
opacity : 1;}
.circle{
background-color : #fff;
width : 10px;
height : 10px;
border-radius : 50%;
margin : 5px;
animation : bounce 0.5s infinited ease-in; }
.circle:nth-of-type(2){
animation-delay : 0.1s;}
.circle:nth-of-type(3){
animation-delay : 0.2s;}
@keyframes bounce{
0%,100%{
transform : translateY(0);}
50%{
transform : transflateY(-50%);}}