Geek Answers Handbook

CSS transition - two directions?

Here is a rough example to help show what I would like: http://jsfiddle.net/GVaNv/

I was wondering if, in any case, make a transition overlay on the left, and then leave it on the right.

So, when you hover overlay appears, as in the example, but instead of stepping back to the left, to transition to the right.

Is it possible? (optional to use transition , I'm open to any way to do this).

+10
css css3
source share
3 answers

Here is a simple solution that no longer requires HTML or JavaScript:

 .box { height: 100px; width: 250px; background: aqua; position: relative; overflow: hidden; } .overlay { position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 100%; color: white; padding: 10px; left: -270px; margin-left: 520px; bottom: 0; transition: left 300ms linear, margin-left 300ms ease-out; } .box:hover .overlay { left: 0; margin-left: 0; transition: left 300ms ease-out; } 
 <div class="box"> <div class="overlay"> Overlay </div> </div>

It uses stock for animation. It works as follows:

  1. The overlay's resting state is set to the right of the element using the field (while left is to the left of the element).
  2. When you hover, we set the field 0 without animation. This allows left animations to appear on the left side of an element.
  3. After mouse hovering over, the field is animated to return to the initial state on the right side of the element.
+14
source share

I tried to achieve this only with CSS, including extra div markup, as follows DEMO

HTML

 <div class="box"> <div class="overlay"> Overlay </div> <div class="overlayFalse"> Overlay false </div> </div>

CSS

 .box { height: 250px; width: 250px; background: aqua; position: relative; overflow: hidden; } .overlay, .overlayFalse { position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 96%; color: white; padding: 2%; right:-274px; bottom: 0; transition: right 300ms ease-out, left 300ms ease-out; } .overlayFalse{ opacity:0; right:auto; left:-274px; } .box:hover .overlay { right:0; opacity:0; } .box:hover .overlayFalse{ opacity:1; left:0; }
+2
source share

Perhaps you can use CSS3 Animations , using one for sliding and another for pulling:

 @keyframes overlay-in { from { left: -999px; } to { left: 0; } } @keyframes overlay-out { from { left: 0; } to { left: 999px; } }

Now you can apply the overlay-in animation to :hover and the other to the normal element definition:

 .box .overlay { /* other definitions ... */ animation-name: overlay-out; animation-duration: 1000ms; animation-fill-mode: none; } .box:hover .overlay { animation-name: overlay-in; animation-duration: 600ms; animation-fill-mode: forwards; }

But there is one problem: the slide animation will play once when the page loads. I cannot figure out how to prevent this without tiny JavaScript by adding a class to the overlay in the first mouseout event. I did it this way in JSFiddle .

But of course, as soon as you need JavaScript, you can also use simple transitions. But this method works even without JavaScript, if you can live with the animation that plays when the page loads.

+1
source share

More articles:


All Articles