animation 예제 (3)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step03_example2.html</title>
<link rel="stylesheet" href="css/animate.css">
<style>
.rubber {
animation: rubberBand 1s linear;
}
button {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<button id="myBtn">click me!</button>
</div>
<script>
/*
위의 버튼을 누를때 마다 rubberBand 라는 키프레임이 버튼에 적용되도록
프로그래밍 해 보세요.
*/
document.querySelector("#myBtn").addEventListener("click", (e)=>{
e.target.classList.add("rubber");
});
document.querySelector("#myBtn").addEventListener("animationend", (e)=>{
e.target.classList.remove("rubber");
});
</script>
</body>
</html>
animation 효과로 rubberBand 효과를 줄 수 있다.
웹브라우저 실행)
'CSS' 카테고리의 다른 글
| animation (2) (0) | 2023.07.13 |
|---|---|
| animation (1) (0) | 2023.07.13 |
| Transition (7) (0) | 2023.07.12 |
| Transition (6) (0) | 2023.07.12 |
| Transition (5) (0) | 2023.07.12 |
