CODEWITHSUNDEEP
csscss-animations
P. Jack
P. Jack

Reputation: 465

Animation not working both on and off hover

My animation does not seem to want to go both on and off the hover. I have tried putting the animation line on the LI:before itself and swapping the 0% and 100% but then nothing happens at all. I've been messing around with it for hours to no avail.

EDIT: Updated link, code

JSFiddle

    ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
  background-color: $base-gray-t;
  margin: 1em;
  padding: .25em 0 0 0;
  height: 3em;
  border-bottom: 0.375em solid $secondary-color;
  overflow: hidden;
  box-shadow: .05em .05em 1em 0;
}

li {
  position: relative;
  color: $base-gray-light;
  padding: 0.40em;
  font-size: 1.5em;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  z-index: 2;
}

li:not(.active):not(:first-child):before {
  content: '';
  display: block;
  position: absolute;
  bottom: .01em;
  width: 100%;
  height: 2em;
  margin-left: -.4em;
  border-radius: .25em .25em 0 0;
  z-index: -1;
}

li:hover:before {
  background: $primary-color;
  animation: splash .3s ease;
  bottom: .01em
}

@keyframes splash {
  0% {
    bottom: -2em;
    border-radius: 100%;
  }
  100% {
    bottom: .01em;
  }
}

Upvotes: 0

Views: 86

Answers (2)

Anthony Cregan
Anthony Cregan

Reputation: 983

The transition method is much less involved and has less scope for problems so i edited your fiddle to use that instead:

https://jsfiddle.net/6t8xLssv/1/

I simply transitioned the :before element on hover, except in the case of the active li.

li:before{
  content:'';
  display:inline-block;
  position:absolute;
  bottom:0;
  right:0;
  left:0;
  height:0;
  transition:height 0.2s linear;
  background:pink;
  border-radius:5px 5px 0 0;
  z-index:-1;
}
li:hover:before{
  transition:height 0.2s linear;
  height: 2em;
}
li.active:before{
  display:none;
}

I hope this helps

Upvotes: 3

frnt
frnt

Reputation: 8795

If you are trying to complete the animation which you created on hover then for that add forwards along-with your animation properties as below,

li:hover:before {
  background: $primary-color;
  animation: splash .3s ease forwards;
  bottom: .01em
}

Check this working jsfiddle link.

Upvotes: 3

Related Questions