CODEWITHSUNDEEP
htmlcss
Cyberdelic Soup
Cyberdelic Soup

Reputation: 60

Why is the transition timing working on color, but not text-align?

I am trying to add transition timing when switching the text alignment via :hover. The transition is added to the color properly, but not the text alignment.

example: Codepen

div {
  background-color: #ff4000;
  height: 300px;
  width: 600px;
}

div:hover>h1 {
  color: #ddd;
  text-align: right;
  transition: .6s ease-in !important;
}
<div>
  <h1>Lorem Ipsum</h1>
</div>

Upvotes: 0

Views: 60

Answers (2)

zer00ne
zer00ne

Reputation: 44088

transform: translateX()

text-align is not animatable but position and transforms are -- the latter being the better choice because it's less GPU/CPU intensive than the former. The following is a what was added as the first leg of the animation in the demo.

transform:translateX(300px);
transition: transform .6s ease-in;

Demo

div {
  background-color: #ff4000;
  height: 300px;
  width: 600px;
}

h1 {
  transform: translateX(0px);
  transition: transform .6s ease-out;
}

div:hover>h1 {
  color: #ddd;
  width: 200px;
  transform: translateX(300px);
  transition: transform .6s ease-in;
}
<div>
  <h1>Lorem Ipsum</h1>
</div>

Upvotes: 0

Stickers
Stickers

Reputation: 78736

I guess it was just the CSS Working Group decided not to implement it for whatever reasons. But there are other ways around, see the following demo by using position and transform tricks.

div {
  background-color: #ff4000;
  height: 300px;
  width: 600px;
  position: relative;
}

h1 {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  margin: 0;
  transition: 0.6s ease-in;
}

div:hover > h1 {
  color: #ddd;
  left: 100%;
  transform: translateX(-100%);
}
<div>
  <h1>Lorem Ipsum</h1>
</div>

Another approach is to animate width.

div {
  background-color: #ff4000;
  height: 300px;
  width: 600px;
}

h1 {
  width: 0;
  text-align: right;
  white-space: nowrap;
  margin: 0;
  transition: 0.6s ease-in;
}

div:hover > h1 {
  color: #ddd;
  width: 100%;
}
<div>
  <h1>Lorem Ipsum</h1>
</div>

Upvotes: 2

Related Questions