HTML, CSS
CSS : Animation(animation 속성)
ThatHomr
2023. 3. 14. 12:11
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>CSS - animation property</title>
<link rel="stylesheet" href="../../css/reset.css">
<style>
#container {
width: 800px;
height: 600px;
border: 5px solid black;
margin: 20px auto;
}
#container > div {
width: 100px;
height: 100px;
background-color: yellowgreen;
position: relative;
top: 0;
left: 0;
/* 애니메이션 효과 적용 */
animation-name: effect;
/* 애니메이션 진행 시간 */
animation-duration: 1s;
/* 애니메이션 반복 횟수 */
animation-iteration-count: 2;
animation-iteration-count: infinite;
/* 애니메이션 진행 방향 */
animation-direction: normal;
animation-direction: alternate;
/* 애니메이션 속도 함수 */
animation-timing-function: linear;
/* 애니메이션 진행 상태 */
animation-play-state: running;
animation-play-state: paused;
}
#container:hover > div {
animation-play-state: paused;
animation-play-state: running;
}
/* animation 속성 */
/* - 애니메이션(효과)를 만들고 적용하기 위한 속성 */
/* - 효과가 시작하고 끝나는 동안 원하는 곳 어디서든 */
/* 스타일을 바꾸며 정의할 수 있다. */
/* - 효과 중간에 스타일이 바뀌는 지점 = 키 프레임(key fram) */
/* 여러 키 프레임을 정의하기 위한 속성 */
/* - 0% ~ 100% 사이의 여러 키프레임을 작성 */
@keyframes effect {
/* 0% { } */
from {
left: 0;
top: 0;
}
/* 50% */
33% {
/* 중간 키프레임을 통해 스타일을 다르게 줄 수 있지만 */
/* 만약 값을 유지해야한다면 동일한 값으로 지정해줘야한다. */
/* → 작성하지 않으면 다음 프레임에 지정된 값으로 서서히 변한다. */
top: 0;
left: 200px;
}
/* 100% { } */
/* to */
66% {
top: 100px;
/* from 블록에서 작성된 속성이 */
/* to 블록에서 지정된 값이 없으면 */
/* from 블록으로 지정된 값으로 변한다. */
/* left: 200px; */
left: 200px;
}
to {
top: 100px;
left: 0;
}
}
</style>
</head>
<body>
<div id="container">
<div></div>
</div>
</body>
</html>