CSS using animation to slide text in from the right on hover-CodePudding

I have been looking at this fiddle for way to long, I want two options for text sliding in, slide in from the left and slide in from the right on hover.

I managed to get the text sliding in from the left and I thought I would just reverse the code and I could get the text slide in from the right (and stop on the left) but there is something I am missing, something I don't understand.

I have tried changing "forwards" in the CSS to "reverse" which I saw on some documentation with no luck.

Fiddle

.slide-con {
  width: 100%;
  overflow: hidden;
  height:200px;
  max-width: 100%;
  background:#eee;
}

/**************************************
RIGHT
**************************************/

.slide-con .slide-right {
  animation: 0.5s slide-right 0.5s reverse;
  opacity: 0; 
  transition: opacity 1.5s ease-in-out; 
  -moz-transition: opacity 1.5s ease-in-out; 
  -webkit-transition: opacity 1.5s ease-in-out;
}
.slide-con:hover .slide-right {
  animation: 0.5s slide-right 0.5s reverse;
  transform:translateX(-100%);
  opacity: 1.0;
}

/**************************************
LEFT
**************************************/

.slide-con .slide-left { 
animation: 0.5s slide-right 0.5s forwards; 
opacity: 0; 
transition: opacity 1.5s ease-in-out; 
-moz-transition: opacity 1.5s ease-in-out; 
-webkit-transition: opacity 1.5s ease-in-out; }

.slide-con:hover .slide-left {
  animation: 0.5s slide-left 0.5s forwards;
  transform:translateX(-100%);
  opacity: 1.0;
}

/**************************************
FRAMES
**************************************/

@-webkit-keyframes slide-left {
    from { transform:translateX(-100%); }
    to { transform:translateX(0);}
}

@-webkit-keyframes slide-right {
    from { transform:translateX(0); }
    to { transform:translateX(-100%); }
}

<div >
  <div >Text that will slide in from the LEFT</div>
  <div >Text that will slide in from the RIGHT</div>
</div>

CodePudding user response：

I'm a bit sleepy right now so i can't really figure this out how to fix with animation.

But if you don't really have to use animation (which for me i'm only use for complicate/repeat animation), a simple transition still work.

.slide-con {
  width: 100%;
  overflow: hidden;
  height: 200px;
  max-width: 100%;
  background: #eee;
}

/**************************************
RIGHT
**************************************/

.slide-con .slide-right {
  opacity: 0;
  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transform: translateX(100%);
}

.slide-con:hover .slide-right {
  transform: translateX(0);
  opacity: 1.0;
}

/**************************************
LEFT
**************************************/

.slide-con .slide-left {
  opacity: 0;
  transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transform: translateX(-100%);
}


.slide-con:hover .slide-left {
  transform: translateX(0);
  opacity: 1.0;
}

<div >
  <div >Text that will slide in from the LEFT</div>
  <div >Text that will slide in from the RIGHT</div>
</div>

CodePudding user response：

I tried to write less code just swapping two @keyframes on hover;

.slide-con {
  width: 100%;
  overflow: hidden;
  height:100px;
  max-width: 100%;
  background:#eee;
}

/**************************************
RIGHT
**************************************/

.slide-con .slide-right {
  animation: 0.5s slide-right 0.5s forwards;
  transition: opacity 1.5s ease-in-out; 
  -moz-transition: opacity 1.5s ease-in-out; 
  -webkit-transition: opacity 1.5s ease-in-out;
  opacity: 0;
}
.slide-con:hover .slide-right {
  animation: 0.5s slide-left 0.5s forwards;
  /* slide-left keyframe ^^animation just to make hover work 
  with less code */
}

/**************************************
LEFT
**************************************/

.slide-con .slide-left { 
animation: 0.5s slide-left 0.5s forwards; 
transition: opacity 1.5s ease-in-out; 
-moz-transition: opacity 1.5s ease-in-out; 
-webkit-transition: opacity 1.5s ease-in-out;
opacity: 0;
}

.slide-con:hover .slide-left {
  animation: 0.5s slide-right 0.5s forwards;
}

/**************************************
FRAMES
**************************************/

@-webkit-keyframes slide-left {
    from { transform:translateX(-100%);}
    to { transform:translateX(0); opacity: 1;}
}

@-webkit-keyframes slide-right {
    from { transform:translateX(100%); }
    to { transform:translateX(0); opacity: 1;}
}

Full e.g/code you can find it here:

https://jsfiddle.net/38rxpk5b/3/