โญ๏ธ ์ ๋๋ฉ์ด์ ํจ๊ณผ : ๊ฑธ์ด๊ฐ์ โญ๏ธ
01. ์ ๋๋ฉ์ด์ ํจ๊ณผ
์ ๋๋ฉ์ด์
(Animation) ํจ๊ณผ๋ HTML ์์์ ์ ์ฉ๋๋ CSS ์คํ์ผ์ ๋ค๋ฅธ CSS ์คํ์ผ๋ก ๋ถ๋๋ฝ๊ฒ ๋ณํ์ํต๋๋ค.
์ ๋๋ฉ์ด์
์ ์ ๋๋ฉ์ด์
์ ๋ํ๋ด๋ CSS ์คํ์ผ๊ณผ ์ ๋๋ฉ์ด์
์ ์ฐ์๋ ์ฅ๋ฉด(sequence)๋ฅผ ๋ํ๋ด๋ ๋ณต์์ ํคํ๋ ์(@keyframes)๋ค๋ก ์ด๋ฃจ์ด์ง๋๋ค.
___ ์ฐธ๊ณ ํ๊ธฐ ___
`1 @keyframes : CSS ์ ๋๋ฉ์ด์
์์ ๊ตฌ๊ฐ์ ์ ํ๊ณ ๊ฐ ๊ตฌ๊ฐ๋ณ๋ก ์ด๋ค ์คํ์ผ์ ์ ์ฉ์ํฌ์ง ์ ํฉ๋๋ค.
02. gif ์์ ์ด๋ฏธ์ง ๊ฐ์ ธ์ค๊ธฐ
[1] < div > ๋ฐ์ค ๋ง๋ค๊ธฐ
ํฌํ ์ต์ผ๋ก gif ํ์ผ์ ํ๋์ฉ ์ด์ด๋ถ์
๋๋ค.
๊ฐ๋ก๋ก ๊ธด ~ ์ด๋ฏธ์ง ํ์ผ์ด ๋ง๋ค์ด์ง๋๋ค.
03. html ์์ฑ
[1] < div > ๋ฐ์ค ๋ง๋ค๊ธฐ
ํฌํ ์ต์ผ๋ก gif ํ์ผ์ ํ๋์ฉ ์ด์ด๋ถ์ ๋๋ค.
<div class="timing step">
<div class="stepbox"></div>
<span class="stepBtn">
<a href="#" class="stepBtnStart">Start</a>
<a href="#" class="stepBtnStop">Stop</a>
</span>
</div>
[2] CSS ์ค์ ํ๊ธฐ
@keyframes ์ ์ด์ฉํ์ฌ ์ ๋๋ฉ์ด์ ์ ์์ง์์ ์กฐ์ ํฉ๋๋ค.
.step {
height: 700px;
background: #E7F9FF;
position: relative;
}
.step .stepbox {
width: 800px;
height: 600px;
background: url(img/walking.jpg);
border-radius: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: ani 1s steps(30, start) infinite; /* (์ ๋๋ฉ์ด์
์ด๋ฏธ์ง์ ์ด ํ๋ ์์, start) */
}
.step .stepbox.start {
animation-play-state: running;
}
.step .stepbox.stop {
animation-play-state: paused;
}
@keyframes ani {
0% {
background-position: 0 0;
}
100% {
background-position: -24000px 0; /* ์ ๋๋ฉ์ด์
์ด๋ฏธ์ง์ ์ด ๋๋น px */
}
}
.stepBtn {
position: absolute;
left: 15px;
top: 20px;
}
.stepBtn a {
background: #e16162;
color: #fff;
padding: 10px;
margin: 3px;
border-radius: 3px;
}
๊ฒฐ๊ณผ๋ณด๊ธฐ
'CSS > Animation' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ํ ์คํธ ํจ๊ณผ ์ ๋๋ฉ์ด์ (3) | 2022.09.08 |
---|---|
CSS animation (3) | 2022.09.08 |
SVG animation (5) | 2022.09.08 |
์ ๋๋ฉ์ด์ ํจ๊ณผ _ ๋ฌดํ๋ ๊ณต (5) | 2022.09.05 |
์ ๋๋ฉ์ด์ ๋น๊ธ๋น๊ธ (5) | 2022.08.29 |
๋๊ธ