<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: cornflowerblue;
/* 이름을 지정 */
animation-name: boxAni;
/* 지속 시간 */
animation-duration: 1s;
/* 반복 횟수 */
animation-iteration-count: infinite;
/* 방향 설정 */
/*
normal : 기본값, 방향:->->
reverse : 역방향, 방향:<-<-
alternate : 반복, 방향 -><-
alternate-reverse : 역방향 반복, 방향:<-->
*/
animation-direction: alternate;
/* 이벤트 발생 후 몇 초 후에 재생할지 */
animation-delay: 2s;
/* 수치 변형 함수 */
/* linear : 처음부터 끝까지 일정한 속도
ease : 천천히 시작 => 빨라짐 => 천천히 끝남
ease-in : 천천히 시작
ease-out : 천천히 끝남
ease-in-out : 천천히 시작, 천천히 끝남
cubic-bezier(n, n, n, n) : 사용자 정의
*/
animation-timing-function: cubic-bezier(0.24,-0.29, 0.23, 0.97);
}
/* 애니메이션 움직임 제어 => @keyframes */
@keyframes boxAni {
from{
/* 처음 스타일 */
margin-top: 200px;
}
to{
/* 나중 스타일 */
margin-left: 200px;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.imgBox {
width: 800px;
height: 450px;
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtHi5NMaOrq3tD0tRpJ1H7yf4w2_S4xeyI3w&usqp=CAU);
background-size: cover;
background-position: center;
animation-name: imgAni;
animation-duration: 2.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes imgAni {
from{
/* 1번 이미지 */
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtHi5NMaOrq3tD0tRpJ1H7yf4w2_S4xeyI3w&usqp=CAU);
}
to{
/* 2번 이미지 */
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXeiaif7dRd-8KnbGXIHsgcimDiVr22CsuaorwqAzFlJCzeHdOfbmlurjQX3ASgyuiRD8&usqp=CAU);
}
}
</style>
</head>
<body>
<div class="imgBox"></div>
</body>
</html>
'Web > HTML_CSS' 카테고리의 다른 글
| [CSS] transform (0) | 2023.03.30 |
|---|---|
| [CSS] transition (0) | 2023.03.30 |
| [CSS] 포토카드 (0) | 2023.03.30 |
| [CSS] flex (0) | 2023.03.29 |
| [CSS] float (0) | 2023.03.28 |
댓글