728x90
★ 객체의 움직임
- 1. transition
- 2. animation > transition + 버전업
★ Animation
- animation-name : [애니메이션 이름]
- animation-duration: [시간초]
- animation-fill-mode: [시간이 다찼을 때 어떻게 할지]
- animation-timing-function: linear;
- animation-delay : [딜레이 시간]
- animation-iteration-count: [반복 횟수][infinite를 주면 무한 반복]
- animation-direction: [reverse : 역으로 진행 | alternate : 원래방향->역방향 재생 반복 | alternate-reverse : 역방향으로 시작 해서 alternate]
- 사용
animation-name : key3; /* 움직임 정의 */
animation-duration: 1s; /* 소요 시간 */
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-delay : 3s;
animation-iteration-count: infinite;/* 반복 횟수 */
animation-direction: reverse;- 선언
@keyframes key1 {
/* 어떤 속성 + 어떤 변화 */
from {
width : 150px;
}
to {
width : 300px;
}
}- hover에 사용
#box:hover {
animation-name : key1;
animation-duration: 1s;
animation-fill-mode: forwards;
}- %를 준 경우
@keyframes key2 {
0% {
width : 150px;
}
25% {
width : 50px;
}
50% {
width : 500px;
}
75% {
width:50px;
}
100% {
width : 150px;
}
}
■ 버튼 클릭 시 애니메이션
- HTML 코드
<h1>버튼</h1>
<button class="effect">글쓰기</button>
<button class="effect">확인</button>
<button class="effect">취소</button>- CSS 코드
.effect:hover {
animation-name : key-effect;
animation-duration: .1s;
animation-iteration-count: 3;
}
@keyframes key-effect {
0% { transform : translate(0px, 0px); }
25% { transform : translate(-5px, 0px); }
50% { transform : translate(0px, 0px); }
75% { transform : translate(5px, 0px); }
100% { transform : translate(0px, 0px); }
}
■ 버튼 아이콘만 반응
- HTML 코드
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<button class="effect2">
<span class="material-symbols-outlined">
settings_accessibility
</span>FIGHTING
</button>- CSS 코드
.effect2 {
display: flex;
align-items: center;
}
.effect2 span {
color : green;
}
.effect2:hover span {
animation-name : key-effect;
animation-duration: .1s;
animation-iteration-count: 3;
}
■ 공튀기기
- HTML 코드
<body>
<div id="box">
<div id="ball"></div>
</div>
</body>- CSS 코드
<style>
#box {
border : 20px solid black;
width : 400px;
height: 600px;
}
#ball {
background-color: coral;
width : 50px;
height: 50px;
border-radius: 50%;
margin : 0 auto;
animation-name: key-ball;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in;
}
@keyframes key-ball {
0% { transform: translate(0px, 0px); }
100% { transform: translate(0px, 550px); }
}
</style>- 실행 결과
■ 또다른 ex)
- HTML 코드
<body>
<span class="material-symbols-outlined">rocket_launch</span>
<span class="material-symbols-outlined">pets</span>
<span class="material-symbols-outlined">sentiment_dissatisfied</span>
</body>- CSS 코드
<style>
html {
/* border : 10px solid dodgerblue; */
/* height: 100%; 콘텐츠를 중앙에 위치하기 위해서 */
}
body {
/* height: 100%; */
/* border : 10px solid black; */
height: 100vh; /*눈에 보이는 영역 크기만큼 꽉채워라 */
margin : 0;
display : flex;
justify-content: center;
align-items: center;
background-color: black;
}
/* 스크롤바를 제거 */
body::-webkit-scrollbar {
display : none;
}
.material-symbols-outlined {
font-size : 3rem;
font-weight: bold;
transform: scale(150, 150);
opacity: 0;
animation-name : key-logo;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
@keyframes key-logo {
from { transform: scale(150, 150); opacity: 0;}
to {transform: scale(1,1); opacity: 1;}
}
.material-symbols-outlined:nth-child(1){
color :tomato;
animation-delay : 0s;
}
.material-symbols-outlined:nth-child(2){
color :gold;
animation-delay : 0.6s;
}
.material-symbols-outlined:nth-child(3){
color :dodgerblue;
animation-delay : 1.2s;
}
</style>- 실행결과
728x90
'웹페이지' 카테고리의 다른 글
| CSS STEP 33 - Responsive (0) | 2023.04.20 |
|---|---|
| CSS STEP 32 - Variable (0) | 2023.04.20 |
| CSS STEP 30 - Transition 응용 예제 모음 (0) | 2023.04.19 |
| CSS STEP 29 - Transition (0) | 2023.04.19 |
| CSS STEP 28 - Display (0) | 2023.04.19 |
