CODEWITHSUNDEEP
cssanimationfontskeyframe
user3003895
user3003895

Reputation: 11

How to transform font-style with CSS3?

I have a one word title that is split in two halves which are animated with @keyframe and meet in the middle of the page. Problem: I need one of the two halves to transform from regular to italic after it has reached its proper position in the middle of the page. Since I don't intend to make the title clickable there is no point in using hover. Is there a way to do this without resorting to javascript...?

Upvotes: 1

Views: 1572

Answers (1)

Gaël Barbin
Gaël Barbin

Reputation: 3919

As the font-style is not an animatable property, you can use a skew tranformation. 

h1 span {
  position: relative;
}
#title_part1 {
  animation: part1_move 2s;
}
#title_part2 {
  
  animation: part2_move 2s,part2_skew 4s;
  
  display: inline-block;
  -ms-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

@keyframes part1_move {
  from {
    left: -100px;
  }
  to {
    left: 0;
  }
}


@keyframes part2_move {
  from {
    left: 100px;
    }
  to{
    left:0
  }
}

@keyframes part2_skew{
  from {
    transform:skewX(0);
    -ms-transform:skewX(0)
  }
  50%{
    transform:skewX(0);
    -ms-transform:skewX(0)
  }
  to{
    transform:skewX(-20deg);
    -ms-transform:skewX(-20deg)
  }
}
<h1>
  <span id="title_part1">The start and </span>
  <span id="title_part2">the end of my title </span>
</h1>

Related questions:

Fade from normal text to italics text smoothly?

Gradual italics?

Upvotes: 5

Related Questions