I have set up a temporary page with a two-word message in the h1 tag. The h1 has a CSS3 infinite transition for shadow animation.
The shadow is visible on all sides, but it does not transition smoothly. The shadow changes abruptly at regular intervals.
If you observe the shadow closely, you will notice that the shadow's animation is not working correctly. The shadow switches suddenly without any smooth animation from top to right, right to bottom, bottom to left, and left to top again.
I am experimenting with moving the shadow in all directions.
Check out my CodePen here:
http://codepen.io/yourusername/pen/PgrL2j/
CSS:
h1 {
color: #ffffff;
vertical-align: middle;
height: 100%;
display: table-cell;
font-size: 5em;
text-align: center;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
animation: message 3s infinite;
-webkit-animation: message 3s infinite;
}
@keyframes message {
25% {
text-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
}
50% {
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
75% {
text-shadow: -1px 0 3px rgba(0, 0, 0, 0.3);
}
100% {
text-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
}
}
@-webkit-keyframes message {
25% {
-webkit-text-shadow: 1px 0 3px rgba(0, 0, 0, 0.3);
}
50% {
-webkit-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
75% {
-webkit-text-shadow: -1px 0 3px rgba(0, 0, 0, 0.3);
}
100% {
-webkit-text-shadow: 0 -1px 3px rgba(0, 0, 0, 0.15);
}
}
HTML:
<div class="container">
<h1>Coming Soon…</h1>
</div>