<button
  type="button"
  class="toggle-turn-on-off-animation-button">
  애니메이션 끄기
</button>

<div class="sequencing is-animate" lang="en">
  <span>CSS</span>
  <span>Sequnce</span>
  <span>Animation</span>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 100vh;
  background: #6238CA;
  color: #fff;
}

.sequencing {
  display: flex;
  flex-flow: column;
  font-size: 100px;
  font-weight: 100;
}

.sequencing.is-animate span {
  opacity: 0;
  transform: translateY(4rem);
  animation: 
    transform-none 
    0.6s 
    cubic-bezier(0.2, 0.66, 0.54, 1.4) 
    infinite
    alternate
    forwards;
}

.sequencing span:nth-child(1) { animation-delay: 0.2s }
.sequencing span:nth-child(2) { animation-delay: 0.4s }
.sequencing span:nth-child(3) { animation-delay: 0.6s }

@keyframes transform-none {
  to {
    transform: none;
    opacity: 1;
  }
}


.toggle-turn-on-off-animation-button {
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  padding: 0.3rem 0.6rem;
  background: none;
  color: #fff;
  transition: 0.3s ease-out;
}

.toggle-turn-on-off-animation-button:hover {
  border-color: rgba(255, 255, 255, 1);
}

.toggle-turn-on-off-animation-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 90, 0.6);
}

// 상태 상수
const STATE_ANIMATE = 'animate-sequence-motion'

// 애니메이션 상태 가져오는 함수
const getStateMotion = () => {
  return localStorage.getItem(STATE_ANIMATE)
}

// 애니메이션 상태 설정하는 함수
const setStateMotion = value => {
  localStorage.setItem(STATE_ANIMATE, value)
}

// 애니메이션 상태 변경 함수
const toggleStateAnimation = () => {
  if ( getStateMotion() === 'false' ) {
    setStateMotion(true)
  } else {
    setStateMotion(false)
  }
  detectStateAnimation()
}

// 애니메이션 상태 감지 처리 함수
const detectStateAnimation = () => {
  if ( getStateMotion() === 'false' ) {
    sequencingContainer.classList.remove('is-animate')
    toggleButton.textContent = '애니메이션 켜기'
  } else {
    sequencingContainer.classList.add('is-animate')
    toggleButton.textContent = '애니메이션 끄기'
  }
}

// 시퀀싱 컨테이너
const sequencingContainer = document.querySelector('.sequencing')

// 토글 버튼
const toggleButton = document.querySelector('.toggle-turn-on-off-animation-button')

// 이벤트 핸들링
toggleButton.addEventListener('click', toggleStateAnimation)


// 앱 초기화
detectStateAnimation()