프로그래밍

[Web] day33 : CSS 애니메이션 본문

Web/Web

[Web] day33 : CSS 애니메이션

시케 2023. 7. 4. 17:06
728x90
반응형

2023.06.21.수

애니메이션 효과

CSS 애니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 준다
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 구성된다

애니메이션은 시간에 따라 달라진다는 것이 포인트이다

애니메이션 효과 01

로고 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과 01</title>
<style type="text/css">
	li {
		list-style-type: none;
	}
	li a{
		margin: 10px;
		padding: 5px;
		display: block;
		width: 150px;
		height: 40px;
		/* text-align: center; */
		text-decoration: none;
		line-height: 40px;
		background: lightblue;
		transition: width 2s, background 1s;
	}
	li a:hover {
		background: pink;
		width: 300px;
		color: gray;
	}
</style>

</head>
<body>

<h3> 로고 </h3>
<hr>
<ul>
	<li><a href="#">메일</a></li>
	<li><a href="#">카페</a></li>
	<li><a href="#">블로그</a></li>
	<li><a href="#">쇼핑</a></li>
</ul>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니메이션 효과02</title>
<style type="text/css">
	@keyframes test{
		0% {background: lightgray; transform: translate(0,0);}
		50% {background: lightgreen; transform: translate(100px,200px)}
		100% {background: red; transform: translate(0,0);}
	}

	p{
		padding: 5px;
		width: 100px;
		height: 100px;
		background: lightgray;
		animation-name: test;
		animation-duration: 0.01s;
		animation-fill-mode: forwards;
		animation-iteration-count: infinite;
	}


</style>
</head>
<body>

<p>&nbsp;&nbsp;&nbsp;&nbsp;1:1<br>
&nbsp;&nbsp;&nbsp;&nbsp;24시간<br>
&nbsp;&nbsp;&nbsp;&nbsp;상담</p>

</body>
</html>
728x90
반응형

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

[Web] day34 : 자바스크립트 이벤트 연결01  (0) 2023.07.04
[Web] day34 : 자바스크립트  (0) 2023.07.04
[Web] day33 : CSS 활용  (0) 2023.07.04
[Web] day33 : CSS 선택자  (0) 2023.07.04
[Web] day33 : CSS 기초  (0) 2023.07.04
'Web/Web' Related Articles more
Comments