주 사용 CSS
- animation
- keyframe
+ animation-timing-function
+ flex - 정가운데 배치
Html
<body>
<div class="wrap">
<img src="https://blog.kakaocdn.net/dn/L6KJ7/btskiAnNrQN/6kUJKntEFuKZyHBXgxZzBK/img.png" class="moving">
</div>
</body>
Css
.wrap {
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
.moving {
animation: move 0.7s ease-in 0s infinite alternate;
margin-top: 0;
width:80px
}
@keyframes move {
0% {margin-top: 0px;}
100% {margin-top: 10px;}
}
Result
*result 클릭해 주세요.
728x90
반응형
'퍼블리싱' 카테고리의 다른 글
모바일에서 input 태그, number 숫자 자판(키패드) - 안드로이드/아이폰 (0) | 2023.10.16 |
---|---|
CSS 애니메이션 타이밍 효과 비교 (linear, ease, ease-in, ease-in-out) (0) | 2023.08.02 |
[웹 디자인/퍼블리싱] 디자인시 PC 화면 사이즈 정하기(+미디어쿼리 분기점) (0) | 2023.07.06 |
css background 속성 / 단축 속성 / 주의점 (0) | 2023.06.26 |
모달팝업, 모달창, 이미지 슬라이드 제이쿼리 플러그인 - 무료(MIT) (0) | 2023.06.16 |
댓글