반응형
아직도 애니메이션에 대해서 모른다는 것을 알고 바로 공부 빡!
물론 기초 강좌였다
alternate 왔다갔다 한다
normal 이 기본값이다
alternate-reverse 거꾸로 출발 (거꾸로 normal)
linear는 가속도가 붙지 않은 경우이다.
forwards 마지막에 위치한 자리에서 멈추겠다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
background-color: blue;
animation-name: ani_box;
animation-duration: 2s;
/* animation-delay: 4s; */
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
@keyframes ani_box {
from {
margin-left: 0;
}
to {
margin-left: 400px;
}
}
</style>
<body>
<div class="box"></div>
</body>
</html>반응형
'HTML, CSS' 카테고리의 다른 글
| css 반응형 PC, 태블릿, 모바일 사이즈 (0) | 2023.06.25 |
|---|---|
| [CSS] Box shadow 쉽게 만드는 사이트 (0) | 2023.06.17 |
| [css] Scroll bar 꾸미기 (0) | 2023.05.26 |
| [CSS] after, not nth-child 같이 사용하기 (0) | 2023.05.26 |
| ::after ::before content에 공백 넣고 싶을 때 (0) | 2023.05.25 |