Html＆JQuery animate 좌/우, 상,하 에니메이션
페이지 정보
작성자 디자인천일
작성일Date: 2025-03-27 21:07
조회view: 5
본문
animate 좌/우, 상,하 에니메이션
<head>태그에 삽입
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
좌우로 움직이는 에니메이션
position:relative 사용.
position:absolute는 오류남
상하로 움직이는 에니메이션
css
.character1 {position:absolute;left:0;top:0;z-index:1;}
.character1 div {
position:relative;
animation-name: leftright;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.character2 {position:absolute;right:0;top:100px;z-index:1;
animation: updown 0s linear 0s infinite alternate;
}
@keyframes leftright {
0% {left:0px; top:0px;}
100% {left:50px; top:0px;}
}
@keyframes updown {
0% {margin-top: 0px;}
100% {margin-top: 20px;}
}