Blur효과로 나타나는 텍스트

스크립트는 1도 없이 css animation 기능으로 순차적으로 나타났다 사라지는(페이드인 아웃) 모션입니다.

너무 간단하지만 잘 활용하면 페이지를 꽉차보이게 만들 수 있는 깨알모션이 될것 같습니다 

미리보기

희미했던 내가 점점 선명하게 떠오른다

 

css

.text {font-size:50px;}
.text span:nth-child(1) {animation: txt_blur 1s infinite alternate ease-in;}
.text span:nth-child(3) {animation: txt_blur 1.5s infinite alternate ease-in;}
.text span:nth-child(2) {animation: txt_blur 2s infinite alternate ease-in;}

@keyframes txt_blur {
  0% {
  filter:blur(7px);
  -moz-filter:blur(7px);
  -webkit-filter:blur(7px);
  opacity: 0;
  }
  50% {
  filter:blur(7px);
  -moz-filter:blur(7px);
  -webkit-filter:blur(7px);
  opacity: 0;
  }
  100% {
  filter:blur(0);
  -moz-filter:blur(0);
  -webkit-filter:blur(0);
  opacity: .9;
  }
}

html

<p class="text">
  <span>희미했던</span> <span>내가 점점</span> <span>선명하게 떠오른다</span>
</p>