Web/CSS

[CSS] 애니메이션

웹코린이 2023. 6. 23. 12:30
728x90

 

 

CSS 애니메이션

html 요소에 스스로 움직임과 변화를 부여하는 기술 (CSS3)

 

 

실습 1

 

 

애니메이션 효과 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-decoration: none;
		line-height: 40px;
		background: lightblue;
		transition: width 1s, background 1s;
	}
	li a:hover {
		background: red;
		color: white;
		width: 300px;
	}
</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>

 

실습 2

 

애니메이션 효과 02

1:1
    24시간
        상담

<!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: 10px;
		width: 100px;
		height: 100px;
		background: lightgray;
		animation-name: test;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}
</style>
</head>
<body>
	<p>1:1 <br>
	&nbsp;&nbsp;&nbsp;&nbsp;24시간<br>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;상담</p>
</body>
</html>

 

728x90