fadein animation, keyframe

글자가 감춰졌다가 나타나는 애니메이션을 배웠다.

CSS만으로도 구현가능하다.

.sample {
  animation: fadein 3s;
...
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

https://dubaiyu.tistory.com/56

[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 31회차 미션

리액트로 깜박깜박거리게 하는 방법도 배웠다

import React, { useState, useEffect } from 'react'
import PropsTypes from 'prop-types'

function Fader({ text }) {
  const [fadeProp, setFadeProp] = useState({
    fade: 'fade-in',
  })

  useEffect(() => {
    const timeout = setInterval(() => {
      if (fadeProp.fade === 'fade-in') {
        setFadeProp({
          fade: 'fade-out',
        })
      } else {
        setFadeProp({
          fade: 'fade-in',
        })
      }
    }, 4000)
    return () => {}
  }, [])
  return <div className={fadeProp.fade}>{text}</div>
}
Fader.defaultProps = {
  text: 'blink blink',
}
Fader.propTypes = {
  text: PropsTypes.string,
}
export default Fader

https://www.youtube.com/watch?v=tSxrWT4B9gY