CODEWITHSUNDEEP
jqueryhtmlcss
Aravind Suresh Thakidayil
Aravind Suresh Thakidayil

Reputation: 1193

Making the text transition smoother

I've got this <span> of text on my website. What I want to do here is make this text increase in font-size when it is hovered over. I used the usual transition: 1s font-size ease, but that just makes it a really rough transition. I want to make it go smoothly, so that it doesn't make micro intervals in the middle.

Here's my HTML+CSS, trimmed to the said element:

span {
  font-size: 12px;
  font-family: sans-serif;
  transition: 1s font-size ease;
 }
span:hover {
  font-size: 24px;
}
<span>Aravind's Site</span>

And BTW, no jQuery, please, unless absolutely necessary.

Upvotes: 3

Views: 67

Answers (1)

kukkuz
kukkuz

Reputation: 42352

Instead of transforming font-size you can use scale along with transition:

  1. Add these transition rules to span:

    transition: transform 1s ease;
display: inline-block;
transform-origin: left;

  2. On hover use transform: scale(1.5)

span {
  font-size: 12px;
  font-family: sans-serif;
  transition: transform 1s ease;
  display: inline-block;
  transform-origin: left;
 }
span:hover {
  transform: scale(1.5);
}
<span>Aravind's Site</span>

Upvotes: 4

Related Questions