๐Ÿ“Frontend/๐Ÿ“•CSS

[CSS] @keyframes(ing)

Hoon2 2022. 8. 4. 00:43
728x90

@keyframes

  • ์Šคํ…Œ์ด์ง€๋“ค์„ ์ •์˜ํ•˜๊ณ  ๊ฐ ๊ตฌ๊ฐ„๋งˆ๋‹ค ๋‹ค๋ฅธ ์Šคํƒ€์ผ์„ ์ ์šฉ ์‹œํ‚ฌ๋•Œ ์“ฐ๋Š” ์ฟผ๋ฆฌ 
    • ์šฐ๋ฆฌ๊ฐ€ ์ •ํ•œ ์ด๋ฆ„ 
    • ์Šคํ…Œ์ด์ง€ : 0%-100%, from(0&์™€ ๊ฐ™์Œ) ๊ทธ๋ฆฌ๊ณ  to(100%์™€ ๊ฐ™์Œ)
    • CSS ์Šคํƒ€์ผ : ๊ฐ ๊ตฌ๊ฐ„์— ์ ์šฉ์‹œํ‚ฌ ์Šคํƒ€์ผ 
  • ํŽ˜์ด์ง€ ๋„˜์–ด๊ฐˆ ๋•Œ, ์„œ์„œํžˆ ํŽ˜์ด์ง€ ๋ณด์ด๊ฒŒ ํ•˜๊ธฐ 
.container { //css 
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
animation: fadein 2s;
}


@keyframes fadein { //keyframes ์ฟผ๋ฆฌ 
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
728x90