다연이네

[days05] CSS 애니메이션 본문

Web/CSS

[days05] CSS 애니메이션

　다연　 2020. 12. 9. 13:55
반응형

CSS 애니메이션


- JavaScript 또는 flash를 사용하지 않고도 html 요소에 애니메이션 효과를 주는 것
- 현 스타일에서 다른 스타일로 점차 변환되는 것
- 애니메이션과 관련된 속성
@keyframes
animation-name
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation(모든걸 한번에)


- CSS 애니메이션을 처리하기 위해서는 제일 먼저 애니메이션에 대한 여러개의 키프레임을 지정해야 함
  키프레임이란 ? 특정 시간에 요소가 가질 스타일

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
div{
	width: 100px;
	height: 100px;
	background: red;

	animation-name: example;
	animation-duration:4s;
	
}

/* 
@keyframes example{ => @keyframe 키프레임명 
	from{
		background-color:red;
	}
	to{
		background-color: yellow;
	}
}
 */
 
 
 
/*  
@keyframes example{
	0%{
		background-color:red;
	}
	100%{
		background-color: yellow;
	}
}
 */


@keyframes example{
	0%{
		background-color:red;
	}
	25%{
		background-color:blue;
	}
	50%{
		background-color:green;
	}
	100%{
		background-color: yellow;
	}
}
 
</style>

</head>
<body>

<!-- 배경색: 빨강 -> 노랑 애니메이션 효과 -->
<div></div>

</body>
</html>

 

 

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
div{
	width: 100px;
	height: 100px;
	background: red;
	
	position: relative;/* 밑에서 left top이 먹으려면 static이 아니라 다른 값 줘야 하니까 */
	
	animation-name: example;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-iteration-count:infinite;
	animation-direction: alternate;
	/* reverse, normal, alternate(왔다갔다), alternate-reverse */
	animation-delay: 2s; /* 2초 후에 시작 */
}

div:hover {
	
}

@keyframes example{
	0%{	background-color:red;left:0;top:0;}
	25%{background-color:blue;left:200px;top:0;}
	50%{background-color:green;left:200px;top:200px;}
	75%{background-color:yellow;left:0;top:200px;}
	100%{background-color:red;left:0;top:0;}
}

</style>

</head>
<body>
<div></div>
</body>
</html>

animation-direction:

                            alternate;
                            reverse;

                            normal;

                            alternate;

                            alternate-reverse;

 

 

 

 

animation-fill-mode(채우기 모드)
                                : none(기본값)
                                : forwards - 마지막 키프레임 스타일 유지
                                : backwards - 처음 키프레임 스타일 유지
                                : both 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
div{
width: 100px;
height: 100px;
position: relative;

background-color: red;
/* 
animation-name:example;
animation-duration:3s;
animation-delay: 2s;
animation-fill-mode: forwards; 
*/

animation: example 3s linear 2s infinite alternate ;
}

@keyframes example{
	from{top:0; background-color:yellow;}
	to{top:200px;}
}
</style>

</head>
<body>

<div></div>

</body>
</html>

 

 

반응형
저작자표시 비영리

'Web > CSS' 카테고리의 다른 글

[days05] 툴팁(Tooltip)  (0) 2020.12.09
[days05] 1) 로딩 이미지 처리 2) 이미지 흔들기  (0) 2020.12.09
[days05] CSS 전환 - transition  (0) 2020.12.09
[days05] CSS 3D 변환 - transform  (0) 2020.12.09
[days04] 1) @font-face 2) 2D 변환 방법  (0) 2020.12.08
'Web/CSS' Related Articles more
Comments