animate 좌/우, 상,하 에니메이션-공책

Html+CSS animate 좌/우, 상,하 에니메이션

페이지 정보

작성자후야
조회 : 366
작성일 : 2022-03-19 21:21

본문

animate 좌/우, 상,하 에니메이션

<head>태그에 삽입

좌우로 움직이는 에니메이션

position:relative 사용.

position:absolute는 오류남

상하로 움직이는 에니메이션

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

<style>
.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 0.9s 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;}
}
</style>

이전글다중 검색을 위한 프로그램 2022.03.23
다음글view페이지 두번째 이미지 부터 출력하기 2022.02.16

animate 좌/우, 상,하 에니메이션 > 공책

공책

페이지 정보

본문