Reply To: Animate the tagline

[Andy]

After thinking about this some more, try this instead:

#masthead.scrolled .site-description {
	-webkit-animation-name: lbeercustomzoom;
	animation-name: lbeercustomzoom;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

@-webkit-keyframes lbeercustomzoom {
  10% {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }

  to {
	opacity: 0;
	-webkit-transform: translate3d(400%, 0, 0);
	transform: translate3d(400%, 0, 0);
  }
}

@keyframes lbeercustomzoom {
  10% {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
  }

  to {
	opacity: 0;
	-webkit-transform: translate3d(400%, 0, 0);
	transform: translate3d(400%, 0, 0);
  }
}

Not sure if that’s the effect you’re after, but you can experiment with different values for animation-duration and translate3d