[CSS] @keyframes

@keyframes : animation 만들기

@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%);}}