CODEWITHSUNDEEP
htmlcss
Chase
Chase

Reputation: 151

Reveal hidden letters from the left by sliding to the right

I want to make the content animate so that the letters slide in to the right from the "T".

Here is a jsfiddle of the below:

.two {
  width: auto;
  -webkit-transition: all 1s ease;
}
.two:before {
  content: "T";
  width: auto;
}
.two:hover {
  width: auto;
}
.two:hover:before {
  display: none;
}
.two:hover:after {
  content: "This is a Label";
  width: auto
}
<div class="two">
</div>

Upvotes: 7

Views: 918

Answers (4)

Weafs.py
Weafs.py

Reputation: 22992

Animating opacity of each letter from left to right:

You could animate each letter's opacity by combining svg's linearGradient and mask and using JavaScript for shifting the x1 and x2 attributes of the linearGradienton mouseover and mouseleave events.

var grad = document.getElementById('gradient');
// higher 'animSpeed' yeilds lower speed
var animSpeed = 20;
var two = document.getElementsByClassName('two')[0];

two.addEventListener('mouseenter', function() {
  for (i = 0; i < two.offsetWidth; i++) {
    var anim = setTimeout(function() {
      var x1 = (parseInt(grad.getAttribute('x1').slice(0, -1), 10) + 1) + '%';
      var x2 = (parseInt(grad.getAttribute('x2').slice(0, -1), 10) + 1) + '%';
      grad.setAttribute('x1', x1);
      grad.setAttribute('x2', x2);
    }, animSpeed * i)
  }
});

two.addEventListener('mouseleave', function() {
  for (i = 0; i < two.offsetWidth; i++) {
    var anim = setTimeout(function() {
      var x1 = (parseInt(grad.getAttribute('x1').slice(0, -1), 10) - 1) + '%';
      var x2 = (parseInt(grad.getAttribute('x2').slice(0, -1), 10) - 1) + '%';
      grad.setAttribute('x1', x1);
      grad.setAttribute('x2', x2);
    }, animSpeed * i)
  }
})
<svg>
  <defs>
    <linearGradient id="gradient" x1="-15%" y1="0%" x2="0%" y2="0%">
      <stop stop-color="white" offset="0" />
      <stop stop-color="black" offset="1" />
    </linearGradient>
    <mask id="mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <rect width="1" height="1" fill="url(#gradient)" />
    </mask>
  </defs>
  <foreignObject width="90px" height="100%" x="2" y="12" mask="url(#mask)">
    <div class="two">This is a label</div>
  </foreignObject>
</svg>

Slide from left to right:

You could transition the transform property.

Updated Fiddle

.two {
  display: block;
  width: 300px;
  padding: 15px;
}
.two:before {
  content: "T";
}
.two:hover:before {
  display: none;
}
.two:after {
  position: absolute;
  content: "This is a Label";
  transform: translateX(-150%);
  transition: transform 1s ease;
}
.two:hover:after {
  content: "This is a Label";
  transform: translateX(0%);
}
<div class="two"></div>

Upvotes: 5

misterManSam
misterManSam

Reputation: 24692

Reveal letters with :before mask

If you just want to use CSS, we can create a mask which slides over the text and then is pushed to the right to reveal the text in the div.

Example

.two {
  width: 100px;
  position: relative;
  overflow: hidden;
}
.two:before {
  content: '';
  position: absolute;
  left: 0.6em;
  top: 0;
  height: 100%;
  width: 100%;
  background: #FFF;
  transition: left 1s;
}

.two:hover:before {
left: 100%;
}

.color:before {
  background: #F00;  
}
<div class="two">This is a Label</div>

It looks like this (hover):

<div class="two color">This is a Label</div>

Upvotes: 2

c-smile
c-smile

Reputation: 27460

CSS is not capable to animate auto values in principle. So consider either 

.two:hover::after{ width: 100px;}

( http://jsfiddle.net/k2wou9eh/1/ ) or other options.

Upvotes: 1

Ian Hazzard
Ian Hazzard

Reputation: 7771

This is not possible with just the :before and :after psuedo-elements. Let me suggest another similar approach.

/* start SLIDE-IN code */

.two > .capitalT > .else {
  position: relative;
  left: -100px;
  opacity: 0;
  transition: left 0.5s, opacity 0.5s;
}
.two > .capitalT:hover > .else {
  left: 0;
  opacity: 1;
}
/* end SLIDE-IN code */
<div class="two"><span class="capitalT"><span class="t">T</span><span class="else">his is a Label</span></span>
</div>

Upvotes: 1

Related Questions