animation 예제 (2)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step03_example.html</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<style>
@keyframes dropAni {
0%{
transform: translateY(-500px);
}
50%{
transform: translateY(100px);
}
100%{
transform: translateY(0px);
}
}
.drop{
animation: dropAni 1s ease-out;
}
</style>
</head>
<body>
<div class="container">
<h1>Animation 예제</h1>
<img class="drop" src="images/top01.jpg">
</div>
</body>
</html>
@keyframes 으로 animation 효과를 줄 수 있다.
웹브라우저 실행)
'CSS' 카테고리의 다른 글
| animation (3) (0) | 2023.07.16 |
|---|---|
| animation (1) (0) | 2023.07.13 |
| Transition (7) (0) | 2023.07.12 |
| Transition (6) (0) | 2023.07.12 |
| Transition (5) (0) | 2023.07.12 |
