| ์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
|---|---|---|---|---|---|---|
| 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 |
- VSCODE๋จ์ถํค
- scss
- ํ๋ก๊ทธ๋๋จธ์ค ์ฝ๋ฉํ ์คํธ
- ์ฝ๋ฉํ ์คํธ
- inline
- js
- HTML
- ์ธ๋ผ์ธ๋ธ๋ก
- ์๊ณ ๋ฆฌ์ฆ
- object
- string
- ์ธ๋ผ์ธ
- float
- SASS
- ํฉ๊ณ ์๊ณ ๋ฆฌ์ฆ
- @mixin
- javascript
- vscode
- ํ๋ก๊ทธ๋๋จธ์ค
- html ํ๊ทธ
- Em
- carousel slider
- ์๋ฐ์คํฌ๋ฆฝํธ
- css
- layout
- ::before
- ๋ฌธ์์ด
- ์ ๊ฐ์ฐ์ฐ์
- TAG
- input
- Today
- Total
Outputor
transform, @keyframes animation ๋ณธ๋ฌธ
transform
https://developer.mozilla.org/ko/docs/Web/CSS/transform
transform - CSS: Cascading Style Sheets | MDN
CSS transform ์์ฑ์ผ๋ก ์์์ ํ์ , ํฌ๊ธฐ ์กฐ์ , ๊ธฐ์ธ์ด๊ธฐ, ์ด๋ ํจ๊ณผ๋ฅผ ๋ถ์ฌํ ์ ์์ต๋๋ค.
developer.mozilla.org
@keyframes
- ๋ณต์กํ animation ๊ตฌํ ๊ฐ๋ฅํจ
- ํํ: @keyframes ์ด๋ฆ { }
- https://developer.mozilla.org/ko/docs/Web/CSS/@keyframes
@keyframes - CSS: Cascading Style Sheets | MDN
@keyframes @๊ท์น์ ๊ฐ๋ฐ์๊ฐ ์ ๋๋ฉ์ด์ ์ค๊ฐ์ค๊ฐ์ ํน์ ์ง์ ๋ค์ ๊ฑฐ์น ์ ์๋ ํคํ๋ ์๋ค์ ์ค์ ํจ์ผ๋ก์จ CSS ์ ๋๋ฉ์ด์ ๊ณผ์ ์ ์ค๊ฐ ์ ์ฐจ๋ฅผ ์ ์ดํ ์ ์๊ฒ ํฉ๋๋ค. ์ด ๋ฃฐ์ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋
developer.mozilla.org
animation
https://developer.mozilla.org/ko/docs/Web/CSS/animation
animation - CSS: Cascading Style Sheets | MDN
animation CSS ์์ฑ์ ๋ค์์ ์คํ์ผ์ ์ ํํ๋ ์ ๋๋ฉ์ด์ ์ ์ ์ฉํฉ๋๋ค. animation-name (en-US), animation-duration, animation-timing-function (en-US), animation-delay, animation-iteration-count (en-US), animation-direction, anima
developer.mozilla.org
animation์์ margin, width, left, ์ด๋ฐ๊ฑฐ ๋ง๊ณ transform ์ฐ๋ ์ด์
- html css๋ฅผ ๊ทธ๋ํฝ์ผ๋ก ๋ฐ๊ฟ ๋ layout โก paint โก transform ์์๋ก ๋์ํจ
- ๊ทธ๋์ transform์ ๋ฐ๊พธ๋ฉด ๋ง์ง๋ง transform ๋ถ๋ถ๋ง ๋ค์ ๋ ๋๋งํ๊ฒ ๋์ ๋น ๋ฅด๊ฒ ๋์ํจ
HTML
<!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>
<link rel="stylesheet" href="./animation.css" />
</head>
<body>
<div class="btn">
<p>๋ฒํผ</p>
</div>
<div class="cross">+</div>
<div class="menu-box">
<p class="menu">Menu</p>
<p class="item">item</p>
</div>
</body>
</html>
SCSS
body {
margin: 0;
}
// BTN
.btn {
width: 100px;
padding: 10px;
margin-top: 20px;
margin-left: 20px;
text-align: center;
color: #fff;
box-sizing: border-box;
background-color: #0b7285;
border-radius: 5px;
}
.btn:hover {
animation-name: aniBtn;
animation-duration: 1s;
}
@keyframes aniBtn {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(8deg);
}
50% {
transform: rotate(-8deg);
}
75% {
transform: rotate(8deg);
}
100% {
transform: rotate(0deg);
}
}
// CROSS
.cross {
margin:150px auto;
text-align: center;
font-size: 70px;
line-height: 65px;
width: 80px;
height: 80px;
cursor: pointer;
}
.cross:hover {
animation-name: aniCross;
animation-duration: 1s;
animation-fill-mode: forwards;
}
@keyframes aniCross {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-15deg);
}
100% {
transform: rotate(45deg) scale(1.5);
}
}
// MENU-BOX
.menu-box {
width: 200px;
height: 500px;
background: #000;
color: #fff;
box-sizing: border-box;
padding: 20px;
transform: translateX(-100px);
transition: transform 1s;
.menu {
font-size: 20px;
text-align: right;
}
.item {
text-align-last: left;
}
}
.menu-box:hover {
transform: translateX(0);
.menu {
text-align: center;
}
.item {
animation-name: aniMenuItem;
animation-duration: 1s;
animation-fill-mode: forwards;
}
}
@keyframes aniMenuItem {
0% {
transform: translateX(-100px);
}
80% {
transform: translateX(130px) skew(-30deg);
}
100% {
transform: translateX(60px);
}
}'๐จ CSS ๐ป' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| position : sticky (0) | 2022.01.18 |
|---|---|
| Grid (0) | 2022.01.17 |
| Pseudo-element (0) | 2022.01.06 |
| CSS ๋ฎ์ด์ฐ๊ธฐ, ์ข์ ์ฝ๋ ์์น (0) | 2022.01.06 |
| CSS transition (0) | 2022.01.01 |
