Find out the hidden letters on the left by sliding to the right

Question

I want to animate the content so that the letters slide to the right of "T".

Following is jsfiddle :

.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> 

Answer 1

Animation of the opacity of each letter from left to right:

You can animate each opacity of letters by combining svg linearGradient and mask and using JavaScript to switch the x1 and x2 attributes of the linearGradient events to mouseover and mouseleave .

 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 can transition property of transform .

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> 

Answer 2

Identify letters with a mask :before

If you just want to use CSS, we can create a mask that glides over the text and then moves to the right to open 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> 

Answer 3

This is not possible with only :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> 

Answer 4

CSS is not capable of animating automatic values ​​in principle. Therefore consider

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

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