Jump to content

Animating multiple layers / strokes / opacities [UPDATED]

Recommended Posts

[UPDATED IN ANSWERS] Attached updated files.


I'm trying to extend a rather well-used animation formula using css.

To start, here's the basic animation: http://www.daellusknights.com

The banner text is set to a specific rotation,  Animation 1. (two instances)

Likewise, the "glow" effect is also animated. (Animation 2)

What my goal is, the "layers" of each word are going to be statically faded out

by setting each layer slightly more transparent than the one before it.

This includes setting the text, stroke, and glow opacity.

I'm using "h1:nth-child(#){code}" to set the primary properties of each

layer such as Z-offset, etc. This is not a problem for making a transparency

fade with the letters themselves.  What I want to do is also apply the same

transparency fade to the glow, but still have the colors animated.

Is there a shorthand way to do this, or will it be necessary to synchronize

a separate animation for each layer of the block of text? Each with it's own

color animation, but with a set opacity?

Thank you in advance!

Christopher W.



Edited by Daellus
Update with new attachments in answers
Link to post
Share on other sites

Okay, so I've more or less achieved exactly what I wanted to do,

with the exception of the fade-out for the opacity on the glow/blur.

I think that may a limitation of the browser i'm using since the pc

i'm working on is rather outdated. Either way, I'm okay with the

results until i can compare on a newer machine.  Attached the

updated html/css files.



Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...