[CSS] KEYFRAME 애니메이션 기초

CSS로 애니메이션 효과를 넣어보자

 

기본적인건 색바꾸기

 

 

HTML 작성

<div class = "text1"><h1>안녕하세요 여러분. </h1>
</div>

 

 

CSS

.text1 h1{
	
	font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: colorChangeAdvanced;
    animation-duration: 5s ease-out;

}


@keyframes colorChangeAdvanced {
    0% {color: #0dcaf0;}
    25% {color: #3cb3ff;}
    50% {color: #4e69ff;}
    100% {color: #0a53be;}
}

 

이번엔 왼쪽에서 날아오게 해보자

 

.text1 h1{
	
	font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: slide1;
    animation-duration: 1.5s ;
	
	
	
	
	
}






keyframes slide1{
	0%{
		left:-100px;
		opacity: 0;
		transform : scale(0.9, 1)
		
	}
	100%{
	left : 0px;	
	opacity: 1;
		
	}
	
}

 

대충 설명해보면 0%떄가 이전 상태이고  위 설정대로라면 1.5초동안 100%가 된다

0%일때 왼쪽기준에서 -100PX이 멀어지고

 

100%일떄 0PX이 되면서 본래 상태가 된다. 

 

응용하면 다른 속성으로 0%~100%에 넣으면 된다!!