Animate shadows css3? - css

Question

I would like a css animation which creates this:
http://line25.com/wp-content/uploads/2010/text-shadow/demo/index.html#boardgame
But the shadows drop down from the top of the screen and fall into position...is this possible? If not what's the best way to achieve this sort of effect.
#boardgame h1 {
text-align: center;
margin: 200px auto;
font-family: "League-Gothic", Courier;
font-size: 200px; text-transform: uppercase;
color: #fff;
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
}

Answer 1

You can set the text shadow on a pseudo element, and animate that:
body {
background-color: lightblue;
}
h1#boardgame {
text-align: center;
margin: 100px auto;
font-family: "League-Gothic", Courier;
font-size: 200px; text-transform: uppercase;
color: #fff;
position: relative;
}
h1:after {
position: absolute;
content: "My header";
left: 0px;
top: 0px;
width: 100%;
height: 100%;
color: transparent;
text-shadow: 10px 10px 0 #ffd217, 20px 20px 0 #5ac7ff, 30px 30px 0 #ffd217, 40px 40px 0 #5ac7ff;
z-index: -1;
-webkit-animation: slide 5s;
animation: slide 5s;
}
#-webkit-keyframes slide {
0% {-webkit-transform: translateY(-100%);}
100% {-webkit-transform: translateY(0%);}
}
#keyframes slide {
0% {transform: translateY(-100%);}
100% {transform: translateY(0%);}
}
fiddle
alternate fiddle

Answer 2

According to this answer, it is possible: https://stackoverflow.com/a/9540707/451962
#box {
width: 50px;
height: 200px;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-kthtml-transition: all 1s linear;
transition: all 1s linear;
}
.shadow {
-webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
-moz-box-shadow: 0px 0px 4px 2px #D50E0E;
box-shadow: 0px 0px 4px 2px #D50E0E;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-kthtml-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.