<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}
@keyframes floating {
from { transform: translate(0, 0px); }
65% { transform: translate(0, 15px); }
to { transform: translate(0, -0px); }
}
</style>
</head>
<body>
<div class="floating"
style="height: 50px; width: 50px; background: rgb(200,200,200);">
</div>
</body>
</html>
'웹접근성과 웹표준' 카테고리의 다른 글
| CSS로 그라디언트 보더 색상변화 애니메이션 (0) | 2021.07.08 |
|---|---|
| CSS로 그라디언트 백그라운드 색변화 (J쿼리 없이 그라데이션 색변경) (1) | 2021.07.01 |
| J쿼리 없이 CSS transition으로 카드 뒤집기 (0) | 2021.06.22 |
| 아이폰 iOS/사파리에서 input 체크박스/라디오버튼 화면 문제 (0) | 2020.12.24 |
| iOS 키보드 덮침 현상 웹앱 수정 css (0) | 2020.12.08 |
