[CSS] @Keyframe

짱쫑·2021λ…„ 12μ›” 19일
0

πŸ‘‰πŸΌ @Keyframes & μ• λ‹ˆλ©”μ΄μ…˜

CSS μ• λ‹ˆλ©”μ΄μ…˜μ—μ„œ κ°€μž₯ μ€‘μš”ν•œ μš”μ†ŒλŠ” @keyframes(μ΄ν•˜ ν‚€ν”„λ ˆμž„μ¦ˆ)이닀. CSS 문법 쀑 ν•˜λ‚˜λ‘œ μ• λ‹ˆλ©”μ΄μ…˜μ΄ λ§Œλ“€μ–΄μ§€λŠ” 뢀뢄이닀. ν‚€ν”„λ ˆμž„μ¦ˆλ₯Ό νƒ€μž„λΌμΈ μ•ˆμ˜ ν•˜λ‚˜μ˜ μŠ€ν…Œμ΄μ§€(ꡬ간)λ“€ 이라고 μƒκ°ν•˜λ©΄ λœλ‹€. ν‚€ν”„λ ˆμΈμ¦ˆ μ•ˆμ—μ„œ μŠ€ν…Œμ΄μ§€λ“€μ„ μ •μ˜ν•˜κ³  각 κ΅¬κ°„λ§ˆλ‹€ λ‹€λ₯Έ μŠ€νƒ€μΌμ„ μ μš©μ‹œν‚¬ 수 μžˆλ‹€.

πŸ‘‰πŸ» @Keyframe

μ˜ˆμ‹œλ₯Ό ν•˜λ‚˜ λ“€μ–΄μ„œ css에 ν‚€ν”„λ ˆμž„μ¦ˆλ₯Ό λ§Œλ“€μ–΄λ³΄μž.

@keyfames tutsFade{
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

//퍼센티지 λŒ€μ‹ 
@keyframes tutsFade{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}

//이걸 μ€„μ—¬μ„œ μ“Έ μˆ˜λ„ μžˆλ‹€.
@keyframes tutsFade{
  to{
    opacity: 0;
  }
}

πŸ‘‰πŸ½ Animation

μ• λ‹ˆλ©”μ΄μ…˜ 속성은 μ˜ˆμ „μ— ν‚€ν”„λ ˆμž„μ¦ˆλ‘œ 뢈리면 CSS μ„ νƒμž μ•ˆμ— μ‘΄μž¬ν–ˆλ‹€. μ• λ‹ˆλ©”μ΄μ…˜μ€ μ—¬λŸ¬κ°œμ˜ 속성을 κ°€μ§ˆ 수 μžˆλ‹€.

  • animation-name: @keyframes이름
  • animation-duration: νƒ€μž„ν”„λ ˆμž„, μ• λ‹ˆλ©”μ΄μ…˜ μ‹œμž‘λΆ€ν„° λ§ˆμ§€λ§‰κΉŒμ§€ 총 μ‹œκ°„
  • animation-titming-function: μ• λ‹ˆλ©”μ΄μ…˜ 속도 쑰절 (linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier)
  • animation-delay: μ• λ‹ˆλ©”μ΄μ…˜μ΄ μ‹œμž‘ν•˜κΈ° μ „ μ§€μ—°μ‹œκ°„
  • animation-direction: loopλ°©ν–₯ (μ •λ°©ν–₯으둜 반볡, μ—­λ°©ν–₯으둜 반볡, λ²ˆκ°ˆμ•„κ°€λ©° 반볡)
  • animation-iteration-count: 반볡 횟수
  • animation-fill-mode: μ• λ‹ˆλ©”μ΄μ…˜ μ‹œμž‘/끝 μƒνƒœ μ œμ–΄(none, forwards, backwards, both)
.element {
  animation-name: tutsFade;
  animation-duration: 4s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-direction: alternate;
}

//이걸 μ€„μ—¬μ„œ
.element {
  animation: tutsFade 4s 1s infinite linear alternate;
}

1초의 지여닛간 ν›„ 4초의 μ• λ‹ˆλ©”μ΄μ…˜ 길이λ₯Ό 가진 loopλ°©ν–₯을 λ²ˆκ°ˆμ•„κ°€λ©΄μ„œ μ„ ν˜• μ†λ„λ‘œ λ¬΄ν•œ 반볡 κΉœλΉ‘μ΄λŠ” 효과

πŸ‘‰ Vendor Prefixes λ”ν•˜κΈ°

벀더 ν”„λ¦¬ν”½μŠ€λ₯Ό μ‚¬μš©ν•˜μ—¬ 각 λΈŒλΌμš°μ € 지원이 μ΅œλŒ€ν•œ 잘 λ˜λ„λ‘ μ„€μ •ν•΄μ€€λ‹€.

  • 크둬 & μ‚¬νŒŒλ¦¬: -webkit-
  • νŒŒμ΄μ–΄ν­μŠ€: -moz-
  • 였페라: -o-
  • 인터넷 μ΅μŠ€ν”Œλ‘œλŸ¬: -ms-

μ• λ‹ˆλ©”μ΄μ…˜ 속성과 벀더 프리 ν•¨κ»˜ μ‚¬μš©ν•˜κΈ°

.element {
    -webkit-animation: tutsFade 4s 1s infinite linear alternate;
    -moz-animation: tutsFade 4s 1s infinite linear alternate;
    -ms-animation: tutsFade 4s 1s infinite linear alternate;
    -o-animation: tutsFade 4s 1s infinite linear alternate;
    animation: tutsFade 4s 1s infinite linear alternate;
}

@-webkit-keyframes tutsFade { /* your style */ }
@-moz-keyframes tutsFade { /* your style */ }
@-ms-keyframes tutsFade { /* your style */ }
@-o-keyframes tutsFade { /* your style */ }
@keyframes tutsFade { /* your style */ }

πŸ‘‰πŸΎ μ—¬λŸ¬κ°œ μ• λ‹ˆλ©”μ΄μ…˜ 적용
μ• λ‹ˆλ©”μ΄μ…˜μ„ μ—¬λŸ¬κ°œ μ‚¬μš©ν•˜λ €λ©΄ μ‰Όν‘œ(,)λ₯Ό μ΄μš©ν•΄ 뢄리할 수 μžˆλ‹€.

.element {
  animation: tutsFade 4s 1s infinite linear alternate, //이 λΆ€λΆ„
             tutsRotate 4s 1s infinite linear alternate;
}
@keyframes tutsFade {
  to {
    opacity: 0;
  }
}
@keyframes tutsRotate {
  to {
    transform: rotate(180deg);
  }
}

μ˜ˆμ‹œ

πŸ‘‰πŸ» μ‚¬κ°ν˜•μ—μ„œ μ›ν˜• κ΅¬ν˜„ν•˜κΈ°

//htmlνŒŒμΌμ—μ„œ divμƒμ„±ν•œλ‹€
<div></div>

// css 적용
div {
  width: 200px;
  height: 200px;
  background-color: coral; 
}

//ν‚€ν”„λ ˆμž„ μ„ μ–Έ
div {
  width: 200px;
  height: 200px;
  background-color: coral; 
}

//μŠ€ν…Œμ΄μ§€λ§ˆλ‹€ μŠ€νƒ€μΌ μ„€μ •. border-radiusλ₯Ό μ‚¬μš©ν•΄ λͺ¨μ„œλ¦¬λ₯Ό κ°‚μŒ
@-webkit-keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
  }
  25%  {
    border-radius:50% 0 0 0;
  }
  50%  {
    border-radius:50% 50% 0 0;
  }
  75%  {
    border-radius:50% 50% 50% 0;
  }
  100% {
    border-radius:50%;
  }
}

//그런 λ‹€μŒ 배경색 μ„€μ •
@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral; 
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon; 
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
  }
}

//div에 λ™μž‘μΆ”κ°€
@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

//μ• λ‹ˆλ©”μ΄μ…˜ μΆ”κ°€
div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite alternate;  
}
  • animation-name: square-to-circle
  • animation-duration: 2s
  • animation-delay: 1s
  • animation-iteration-count: infinite
  • aniamtion-direction: alternate

:: timing-function μΆ”κ°€
μ• λ‹ˆλ©”μ΄μ…˜μ˜ 속도λ₯Ό μ œμ–΄ν•  수 μžˆλ‹€. μ •κ΅ν•œ 값이 ν•„μš”ν•œ κ²½μš°κ°€ μžˆμ–΄ μˆ˜λ™μœΌλ‘œ κ³„μ‚°ν•˜κΈ°λ³΄λ‹€λŠ” μ‚¬μ΄νŠΈλ₯Ό 톡해 μžλ™μœΌλ‘œ κ³„μ‚°ν•΄μ£ΌλŠ” 값을 μ΄μš©ν•˜λŠ”κ²Œ 더 νŽΈν•˜κ³  더 μ •κ΅ν•˜λ©° 더 νš¨μœ¨μ μ΄λ‹€.
ref. https://matthewlein.com/tools/ceaser

cubic-bezier function으둜 νƒ„μ„±μžˆλŠ” 고무곡같은 효과λ₯Ό μΆ”κ°€ν•˜λ € ν•  λ•Œ

//베지어 곑선을 μ›ν•˜λŠ”λŒ€λ‘œ λ§Œλ“  ν›„ μŠ€λ‹ˆνŽ«μœΌλ‘œ μ• λ‹ˆλ©”μ΄μ…˜μ˜ timing-function값을 ꡐ체
div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s 1s infinite cubic-bezier(1,.015,.295,1.225) alternate;  
}

//μ™„μ„±λœ css
div {
  width: 200px;
  height: 200px;
  background-color: coral;
  animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate;
}
 
@keyframes square-to-circle {
  0%  {
    border-radius:0 0 0 0;
    background:coral;
    transform:rotate(0deg);
  }
  25%  {
    border-radius:50% 0 0 0;
    background:darksalmon;
    transform:rotate(45deg);
  }
  50%  {
    border-radius:50% 50% 0 0;
    background:indianred;
    transform:rotate(90deg);
  }
  75%  { 
    border-radius:50% 50% 50% 0;
    background:lightcoral;
    transform:rotate(135deg);
  }
  100% {  
    border-radius:50%;
    background:darksalmon;
    transform:rotate(180deg);
  }
}

πŸ‘‰πŸ½ κ²°κ³Ό

profile
不怕慒, εͺ怕站

0개의 λŒ“κΈ€