How to animate first letter with CSS3 - html

Question

I am trying to animate first letter of a text with pseudo element selector. However it's not working. The code is working fine if I wrape the first letter in span but it's not working with pseudo element selector (::first-letter).
div.w-text-h a.w-text-value{display:block;}
div.w-text-h a.w-text-value::first-letter{
top: 50%;
right: 50%;
transform: translate(50%,-50%);
text-transform: uppercase;
font-family: verdana;
font-size: 50px;
font-weight: 700;
color: #f5f5f5;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
text-shadow: 1px 1px 1px #5DADE2,
1px 2px 1px #5DADE2,
1px 3px 1px #5DADE2,
1px 4px 1px #5DADE2,
1px 5px 1px #5DADE2,
1px 6px 1px #5DADE2,
1px 7px 1px #5DADE2,
1px 8px 1px #5DADE2,
1px 9px 1px #5DADE2,
1px 10px 1px #5DADE2,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}
div.w-text-h a.w-text-value::first-letter{animation:animated_div 5s infinite;
-moz-animation:animated_div 5s infinite;
-webkit-animation:animated_div 5s infinite;
border-radius:5px;
-webkit-border-radius:5px;
transform-style: preserve-3d;}
#keyframes animated_div
{
0% {}
20% {transform: rotateY(20deg);}
40% {transform: rotateY(40deg);}
60% {transform: rotateY(60deg);}
80% {transform: rotateY(80deg);}
100% {transform: rotateY(100deg);}
}
<div class="w-text-h"><a class="w-text-value" href="http://localhost/Developer/">Developer</a></div>
If I remove pseudo element first-letter, then animation works. I need it on pseudo element first-letter

Answer 1

You can't apply transform to ::first-letter (check properties list). But you can have different wrapper for it, then it's possible. You can use some JS to wrap first letter too.
div.w-text-h a.w-text-value{display:block;}
div.w-text-h a.w-text-value .first-letter{
display: inline-block;
top: 50%;
right: 50%;
transform: translate(50%,-50%);
text-transform: uppercase;
font-family: verdana;
font-size: 50px;
font-weight: 700;
color: #f5f5f5;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 4s;
text-shadow: 1px 1px 1px #5DADE2,
1px 2px 1px #5DADE2,
1px 3px 1px #5DADE2,
1px 4px 1px #5DADE2,
1px 5px 1px #5DADE2,
1px 6px 1px #5DADE2,
1px 7px 1px #5DADE2,
1px 8px 1px #5DADE2,
1px 9px 1px #5DADE2,
1px 10px 1px #5DADE2,
1px 18px 6px rgba(16,16,16,0.4),
1px 22px 10px rgba(16,16,16,0.2),
1px 25px 35px rgba(16,16,16,0.2),
1px 30px 60px rgba(16,16,16,0.4);
}
div.w-text-h a.w-text-value .first-letter{animation:animated_div 5s infinite;
-moz-animation:animated_div 5s infinite;
-webkit-animation:animated_div 5s infinite;
border-radius:5px;
-webkit-border-radius:5px;
transform-style: preserve-3d;}
#keyframes animated_div
{
0% {}
20% {transform: rotateY(20deg);}
40% {transform: rotateY(40deg);}
60% {transform: rotateY(60deg);}
80% {transform: rotateY(80deg);}
100% {transform: rotateY(100deg);}
}
<div class="w-text-h"><a class="w-text-value" href="http://localhost/Developer/"><span class="first-letter">D</span>eveloper</a></div>