CSS Wiping animation on exit

Question

I have an animation that wipes from left to right on hover here. I want to have an exit animation that also goes from left to right (not right to left as shown in the demo). How can I achieve this?

.btn {
  color: #31302B;
  background: #FFF;
  margin: 25px;
  padding: 10px 0;
  width: 240px;
  border: 3px solid #31302B;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  box-shadow: inset 0 0 0 0 #6a0dad;
  -webkit-transition: all ease 0.8s;
  -moz-transition: all ease 0.8s;
  transition: all ease 0.8s;
}

.btn:hover {
  box-shadow: inset 240px 0 0 0 #6a0dad;
  color: #fff;
}

<div class="btn">CONTAINER</div>

Run_Script · Accepted Answer · 2020-05-18T10:08:28.633

2

You could use @keyframes:

.btn {
  color: #31302B;
  background: #FFF;
  margin: 25px;
  padding: 10px 0;
  width: 240px;
  border: 3px solid #31302B;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  animation: out 0.8s ease;
}

@keyframes in {
  from {
    box-shadow: inset 0 0 0 0 #6a0dad;
    color: black;
  }
  to {
    box-shadow: inset 240px 0 0 0 #6a0dad;
    color: white;
  }
}

@keyframes out {
  from {
    box-shadow: inset -240px 0 0 0 #6a0dad;
    color: white;
  }
  to {
    box-shadow: inset 0 0 0 0 #6a0dad;
    color: black;
  }
}

.btn:hover {
  animation: in 0.8s ease;
  box-shadow: inset 240px 0 0 0 #6a0dad;
  color: white;
}

<div class="btn">CONTAINER</div>

edited May 18 '20 at 10:08

answered May 18 '20 at 09:48

Run_Script

2,487
2
15
30

I think you might be reading my question wrong. The hover animation in my demo is already correct (left-to-right). I just want the "unhover" animation to also be left-to-right. – franco May 18 '20 at 09:53
@franco I see, sorry about that. I'll try to update my answer. – Run_Script May 18 '20 at 09:54
@franco I've updated my answer with a solution that uses `@keyframes`. Is this more like what you wanted? – Run_Script May 18 '20 at 10:09

score 0 · Answer 2 · answered May 18 '20 at 09:57

I would suggest using pseudo-element ::after and transform-origin for this.

.btn::after {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    background: #6a0dad;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transition: all ease 0.8s;
    transform-origin: left;
}
.btn:hover {
    color: white;
}
.btn:hover::after {
    transform: scaleX(1);
    transform-origin: right;
}

Add position: relative; z-index: 1; to .btn class

Temani Afif · Answer 3 · 2020-05-18T16:22:43.907

0

A simple background transition can easily do this without keyframes:

.btn {
  color: #31302B;
  background: #FFF;
  margin: 25px;
  padding: 10px 0;
  width: 240px;
  border: 3px solid #31302B;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 2px;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  background:linear-gradient(#6a0dad,#6a0dad) left/0% 100% no-repeat;
  transition: all ease 0.5s,background-position 0s 0.5s;
}

.btn:hover {
  background-size:100% 100%;
  background-position:right;
  color: #fff;
}

<div class="btn">CONTAINER</div>

Related: How to animate underline from left to right?

edited May 18 '20 at 16:22

answered May 18 '20 at 11:08

Temani Afif

245,468
26
309
415

This doesn't do the same thing when I run it. See the code snippet on my answer for (what I think is) the expected behaviour. – Run_Script May 18 '20 at 14:48
@Run_Script this is doing the same thing as your code – Temani Afif May 18 '20 at 15:00
Not in my browser (newest version of safari). The purple moves in left to right and moves out right to left, just as in the original question. Also, one side expands from the centre and not the edge, which is not the animation that was intended. – Run_Script May 18 '20 at 17:43

CSS Wiping animation on exit

3 Answers3