CSS Transition Width Right to Left

javascript html css css-transitions

32,633

Solution 1

Yes, it is possible using Transitions and Positions:

window.onload = function () {
  document.querySelector("h1").classList.add("active");
};

h1 {
  overflow: hidden;
  display: inline-block;
  position: relative;
}
h1 .mask {
  position: absolute;
  transition: all 0.5s linear;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #fff;
}
h1.active .mask {
  right: 100%;
}

<h1><span class="mask"></span>Welcome</h1>

I just wrote an article about this - CSS Transitions & JavaScript for Animated Entry Effects. Hope it is useful... :)

Solution 2

You can use the clip-path property to clip parts of the element so they are not visible. This property can also be animated to reveal the element again, using the forwards keyword in the animation so it stays in it's 'revealed' end state.

The inset takes values that are in order: from-top, from-right, from-bottom, from-left.

#text {
  margin: 0;
  font-size: 100px;
  animation: reveal 2s forwards;
}

@keyframes reveal {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

<h1 id="text">Welcome</h1>

Solution 3

One option is transform: translate with a pseudo element, and no extra element needed.

function animate() {
  document.getElementById("mainText").classList.add('show');
}

#mainText {
  position: relative;
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  white-space: nowrap;
  text-overflow: clip;
  overflow: hidden;
}
#mainText::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: white;
  transition: transform 2s;
}
#mainText.show::after {
  transform: translateX(-100%);
}

<body onload="animate()">

    <h1 id="mainText">Welcome</h1>
    
</body>

Another option, an even better solution, using the pseudo with direction and left/width.

This one work in the same way clip-path does, completely transparent against its background, as opposite to having a mask that revels the text, and with much better browser support.

function animate() {
  document.getElementById("mainText").classList.add('show');
}

body {
  background: black;
}
#mainText {
  position: relative;
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0);
}
#mainText::before {
  content: attr(data-text);
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 100%;
  color: white;
  direction: rtl;
  overflow: hidden;
  transition: left 2s, width 2s;
}
#mainText.show::before {
  left: 0;
  width: 100%;
}

<body onload="animate()">

  <h1 id="mainText" data-text="Welcome">Welcome</h1>

</body>

Solution 4

Something like this

function animate() {
  document.getElementById("overlay").style.width = "0%";

}

#mainText {
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
#overlay{
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background:#fff;
  transition: width 2s;
  height:100%;
}

<body onload="animate()">
  <h1 id="mainText">Welcome</h1>
  <div id="overlay"></div>
</body>

View more solutions

32,633

Oliver Murfett

Updated on February 24, 2020

Comments

Oliver Murfett about 4 years
I am have made a heading (the word Welcome) that reveals itself once the page has loaded (onload="").

Fiddle in case the code below doesn't work.
```
function animate() {
  document.getElementById("mainText").style.width = "100%";

}
```
```
#mainText {
  margin: 0px;
  display: inline-block;
  font-size: 100px;
  width: 0%;
  transition: width 2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
```
```
<body onload="animate()">
  <h1 id="mainText">Welcome</h1>
</body>
```
The CSS and Plain JS work fine but I want the word "Welcome" to be revealed right side first and then moving along, so from the e to the W, instead of how it currently is, which opens left to right.

I have tried text align: right;, but this doesn't change anything.

I preferably don't want to use any jQuery, if the solution is a JS one.

An example of what the desired look should be, half way though the transition:
Oliver Murfett almost 7 years

Definitely not what I was asking, have a look at the Fiddle for an example
Oliver Murfett almost 7 years

This is a cool effect, but not actually what I was asking. I want the e, then the m, then the o ect. to be revealed in that order.
Oliver Murfett almost 7 years

Have a look at the image I linked for what a screenshot half way though would look like.
Oliver Murfett almost 7 years

That last one was exactly what I was looking for! Would you mind editing your comment and deleting the first 2 just to avoid confusion if people look at this in future?
Oliver Murfett almost 7 years

Does the forward keyword do anything? Can you please explain
AlexG almost 7 years

Welp, Slightly too late
Praveen Kumar Purushothaman almost 7 years

@OliverMurfett Looks like he's using CSS keyframe animations.
Praveen Kumar Purushothaman almost 7 years

@OliverMurfett It's an experimental technology, not supported by all browsers, you can have a look at it here: developer.mozilla.org/en/docs/Web/CSS/animation-fill-mode
Asons almost 7 years

@OliverMurfett Updated...no extra elements, simply CSS
Asons almost 7 years

@OliverMurfett The forwards make the animation's last frame persist, or else the element reverts to its initial settings before the animation were applied
Jon Koops almost 7 years

Sorry, I was busy so I didn't post an explanation yet. Will do later.
Praveen Kumar Purushothaman almost 7 years

@OliverMurfett I just blogged about this in CSS Transitions & JavaScript for Animated Entry Effects. Hope it is useful... :)
Jon Koops about 6 years

forwards is not really experimental, it's supported even by Internet Explorer.
Vinicius Lima almost 4 years

What a elegant solution :)