First

If you wrap the first letter in a span, you can apply css to that letter. The 1.5em value means to make the letter 1.5 times bigger than the other letters.

<p><span class='first'>F</span>irst</p>

span.first {
  font-size: 1.5em;
  color: red;
}

First

Another trick is to use the ::first-letter css selector. Css using it will apply only to the first letter in the element.

<p class='first'>First</p>

p.first::first-letter {
  font-size: 1.5em;
  color: red;
}

First

You can animate the color (or almost any other property) by using animation-name and @keyframes. The @keyframes block specifies which properties have which values at what times. The @keyframes block applies to any block with the animation-name property with the same name. Here, rgb-font-color sets the color property to different values at 25% intervals. The percentage is based on the animation-duration property of the element using the animation, here 4 seconds. That means the the color will change every second (25% of 4 seconds is 1 second). The animation-iteration-count property specifies how many times the animation will run. A value of infinite will make the animation run forever.

<p><span class='first animated'>F</span>irst</p>

span.first.animated {
  font-size: 1.5em;
  color: red;
  animation-name: rgb-font-color;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes rgb-font-color {
  0%   {color:red;}
  25%  {color:yellow;}
  50%  {color:blue;}
  75%  {color:green;}
  100% {color:red;}
}

First

Unfortunately you cannot use ::first-letter with animation.

<p class='first animated'>First</p>

p.first.animated::first-letter {
  font-size: 1.5em;
  color: red;
  animation-name: rgb-font-color;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes rgb-font-color {
  0%   {color:red;}
  25%  {color:yellow;}
  50%  {color:blue;}
  75%  {color:green;}
  100% {color:red;}
}