[Css 활용] 말풍선 위 아래로 움직이는 효과, 키프레임

주 사용 CSS

- animation
- keyframe

+ animation-timing-function
+ flex - 정가운데 배치

Html

<body>
	<div class="wrap">
  <img src="https://blog.kakaocdn.net/dna/L6KJ7/btskiAnNrQN/AAAAAAAAAAAAAAAAAAAAAKM2uh8LeonSp-xhDqpdLwSjjWuVM6RbZa-fkBa7HcU4/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1772290799&allow_ip=&allow_referer=&signature=fDqyw%2BQlUwdSXoQZ7Yzf%2F7xb%2FxM%3D" 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) (1)	2023.06.16