728x90
반응형
안녕하세요. ^-*
지난번에 이어 [ animation ]두 번째입니다.
예제는 같은 것으로 준비했어요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
section{
padding:100px;
}
.box{
width:100px;
height:100px;
background:#343434;
margin:auto;
}
@-webkit-keyframes bounce {
0%, 100%, 20%, 50%, 80% {-webkit-transform: translateY(0);transform: translateY(0)}
40% {-webkit-transform: translateY(-30px);transform: translateY(-30px)}
60% {-webkit-transform: translateY(-15px);transform: translateY(-15px)}
}
@keyframes bounce {
0%, 100%, 20%, 50%, 80% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0)}
40% {-webkit-transform: translateY(-30px);-ms-transform: translateY(-30px);transform: translateY(-30px)}
60% {-webkit-transform: translateY(-15px); -ms-transform: translateY(-15px);transform: translateY(-15px)}
}
.bounce {-webkit-animation-name: bounce;animation-name: bounce;-webkit-animation-duration: 1s;animation-duration: 1s;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
</style>
</head>
<body>
<section>
<div class="box bounce "></div>
</section>
<script src="jquery-3.6.2.min.js"></script>
</body>
</html>
|
cs |
@keyframes 만 잠깐 볼까요?
@keyframes 옆에 이 [ animation ] 이름을 정해줍니다.
그리고 {} 안에 애니메이션 내용을 넣어주면 돼요.
from( 시작 ) 또는 0%
to( 끝 ) 또는 100%
중간단계를 넣고 싶다면
원하는 만큼 넣을 수 있습니다.
위의 예제처럼 말이죠.
그리고 [ css ]적용은 .bounce처럼 클래스 명을 넣고
{} 안에 만들어둔 [ animation ]이름을 넣어 실행해 주면 됩니다.
오늘은 짧고 간단하네요.
[ animation ] 어렵지 않아요~
728x90
반응형
'코딩 어린이의 노트' 카테고리의 다른 글
| css로 animation을 만들어 보자 첫번째 (2) | 2023.03.03 |
|---|---|
| scroll bar 커스텀 하기 (6) | 2023.02.26 |
| css만으로 checkbox, radio버튼 커스텀 하기 (2) | 2023.02.24 |
| jquery 반응형 resize만들기 (2) | 2023.02.18 |
| 클립보드를 이용한 내용 복사 (2) | 2023.02.17 |