Flicker animation / keframes

Darcy Daeseok YU ·2022년 2월 4일
0

css effect를 적용하는 중이다.

flicker 효과를 주고 싶은데 천천히 밝아지고 어두워지기를 반복한다.

flicker 잖아 ... 깜빡여야 한다고...

결론 먼저 keyframes 설정이 잘못 되어서 문제가 되었다.
물론 vanilla javascript에서는 정상 작동하는 css이다.

@keyframes flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
}

React / styled-compoents로 구현을 한다.

import {keyframes} from "styled-components" 

const flicker = keyframes`

0%, 18%, 22%, 25%, 53%, 57%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }
  20%, 24%, 55% {       
    text-shadow: none;
  }
`

선언후 사용 

{
anmimation: ${flicker} 1.5s infinite ease-out;
}

문제가 있다. 천천히 깜빡거린다.

검색했다. 해답은 못찾았다.

아래는 혼자서 찾은 임시대책이다.

해결안 :
자바스크립트랑 다르게
퍼센트 구간을 조금더 정확히 지정해줘야 한다.

20% / 24% / 55%에서 빠르게 깜빡이게 할려면

겨져있는 구간 0 ~ 19%
깜빡임 20%
켜져있는 구간 21% ~ 23%
깜빡임 24%
켜져있는 구간 25% ~ 54%
깜빡임 55%
켜져있는 구간 56% ~ 100%

깜빡임과 켜져있는 구간의 간격이 위에는 1% 설정이다. 값이 작을수록 빨리 깜빡인다.
값이 클수록 gradation 효과로 천천히 깜빡인다.

아래는 수정 코드이다.

0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 4px #fff,
      0 0 11px #fff,
      0 0 19px #fff,
      0 0 40px #0fa,
      0 0 80px #0fa,
      0 0 90px #0fa,
      0 0 100px #0fa,
      0 0 150px #0fa;
  }

  20%, 24%, 55% {       
    text-shadow: none;
  }

기존의 styled-components가 생성될때 transform 옵션을 기본으로 가지는 것 같은데 ...
transform : none ; 처리해도 효과가 없다.

추후에 좋은 방법 찾으면 업데이트 하는걸로...

아래는 aminimation : 속성 나열

/ 속기형 / animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode | play-state> [,...];

아래는 구현 해보고 싶은 이펙트 소스

unicode : "█▓▒░█▓▒░█▓▒░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░"

profile
React, React-Native https://darcyu83.netlify.app/

0개의 댓글