afonsoalban
2/20/2018 - 7:00 PM

Animações Stylus

.elemento
  animation glitch_opacity 8s step-start infinite
  
  span
    animation glitch_scale 12s step-start 2s infinite

@keyframes glitch_opacity
	0%
	10%
	20%
		opacity 1
		
	5%
	15%
		opacity 0
	
@keyframes glitch_scale	
	20%
		transform translate(-20px, -5px)
		
	50%
		transform translate(-20px, -5px) scale(.7, .9)
		
	51%
		transform translate(-25px, -5px) scale(.7, .9)
	
	52%
		transform translate(-20px, -5px) scale(.7, .9)
	
	53%
		transform translate(-20px, -5px) scale(1)
		opacity 1
		
	54%
	56%
	58%
		transform translate(0)
	
	55%
	57%
		opacity 0
	
	59%
		opacity 1
		transform scale(1.3, 1.2)
	
	60%
		transform scale(1, 1)
animation atencao 2s infinite

@keyframes atencao
	0%
	20%
	40%
		transform translateY(0)
	
	10%
	30%
		transform translateY(-10px)