안녕하세요. ^-^
오늘은 조금 어려운 animation을 해볼까 합니다.
[ css ]만으로 animation을 만들 수 있답니다.
animation은 만들기에 따라 무수히 많이 만들 수 있어요.
그래서 animation은 몇 번에 걸쳐 포스팅을 해볼게요.
그리고 기본적으로 많이 쓰는 대표적인 몇 가지만
소개해 볼게요.
우선 animation에 대해서 알아보겠습니다.
[ css ]로 애니메이션을 만들려면 animation속성과 그 하위 속성을 지정해야 합니다.
이 속성은 중간 상태를 기술하지 않으며 중간 상태는 @keyframes를 이용하여 지정할 수 있습니다.
animation 하위 속성을 알려드릴게요.
animation-delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
animation-direction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
animation-iteration-count : 애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.
animation-name : 이 애니메이션의 중간 상태를 지정합니다. 중간 상태는 @keyframes 규칙을 이용하여 기술합니다.
animation-play-state : 애니메이션을 멈추거나 다시 시작할 수 있습니다.
animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.
간단한 예제를 하나 만들어 볼게요.
|
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 |
무한히 바운스 되는 예제입니다.
확실하게 보이게 하기 위해 무한히 반복하는 예제로 만들어 봤습니다.
실행하면 이렇게 나옵니다.
@keyprames는 다음 포스팅에서 다뤄 볼까 합니다.
@keyprames도 쓸 말이 참으로 많은 관계로 글이 길어질 것 같거든요.
animation-delay는 기본값이 0s이기 때문에 값을
지정해 주지 않으면 animation이 되지 않습니다.
한 번 만들어두면 여기저기 다 쓸 수 있기 때문에 너무 좋아요.
만드는 과정이 힘들고 어려울 뿐 .....
그래도 모두 힘내서 공부해 보아요.
설명을 잘할 자신은 없지만 제가 아는 선에서 열심히 포스팅해 보겠습니다.
오늘 하루도 즐겁고 행복한 하루 보내세요.
'코딩 어린이의 노트' 카테고리의 다른 글
| css로 animation 만들기 두번째 (4) | 2023.03.11 |
|---|---|
| scroll bar 커스텀 하기 (6) | 2023.02.26 |
| css만으로 checkbox, radio버튼 커스텀 하기 (2) | 2023.02.24 |
| jquery 반응형 resize만들기 (2) | 2023.02.18 |
| 클립보드를 이용한 내용 복사 (2) | 2023.02.17 |