CSS3에서 왜 글리치 효과 되감기를 구현

CSS3를 좋아하는 헵포코 엔지니어입니다!
이전 CSS를 사용하여 글리치 이펙트(지지…지지…같은 움직임을 하는 노이즈 같은 이펙트) 되돌아가기를 만들어 보았으므로 비망록으로 투고합니다.
opacity와 transform만으로 구현한, 간단하게 만들 수 있다니 효과입니다.

이런

See the Pen ExYZomY by y-yoshino ( @yyko )
on CodePen .

상당히 짜릿한 제작인데...

보시다시피, opacity와 translate3d의 애니메이션을 세밀하게 설정하고 그처럼 보이는 것뿐입니다.

정말 간단하기 때문에 누구나 만들 수 있습니다!

응용

레이어가 겹치는 것처럼 보이는 요소를::before와::after의 의사 요소를 사용하여 만들었습니다.

여기에 위에서 만든 애니메이션을 사용하여 약간의 장치를 붙여 보겠습니다.

See the Pen xxKqXXq by y-yoshino ( @yyko )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

가짜 요소로 만든 레이어와 텍스트에 애니메이션을 적용하고 표시될 때 버그가 발생하는 것처럼 보았습니다.

예에서는 움직임을 붙이고 싶은 요소 모두에 같은 움직임(guritti-anim)을 설정해, animation-delay로 지연시켜, 표시 속도를 바꾸고 있을 뿐의 간이의 만들기입니다만, 각각의 요소에 다른 움직임을 붙여도 재미있을지도 모릅니다.

사용하는 장면은 한정될 것 같습니다만, 뭔가의 참고가 되면 다행입니다!