CODEWITHSUNDEEP
csscss-animations
mahyar
mahyar

Reputation: 57

make animation hover like transition hover

i want to change color gray to green then aqua when my element is hover and when mouse go out of element:
if my element is green go to gray
if my elemnt is aqua go to green then gray
More accurate i want to make transtion but for 3 colors
when we use transtion for change 2 colors the result is great becuase when mouse go out of element, color change Gradually to first value like gray but in animation when mouse go out of element color very fast change to gray
What is the solution??

this is my code but not working.

@keyframes test {
  0% {
    background: gray;
  }
  50% {
    background: green;
  }
  100% {
    background: aqua;
  }
}
@keyframes test1 {
  0% {
    background: aqua;
  }
  50% {
    background: green;
  }
  100% {
    background: gray;
  }
}
.one {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  background: gray;
  animation: test1 2s;
}
.one:hover {
  animation: test 2s alternate;
  animation-fill-mode: forwards;
}
<div class="one"></div>

Upvotes: 2

Views: 136

Answers (2)

vals
vals

Reputation: 64164

You can set the background to a gradient and animate the gradient position

.test {
  width: 300px;
  height: 200px;
  background-size: 90000px 100%;
  background-image: linear-gradient(90deg, gray, green, aqua);
  background-position: 0% 0%;
  transition: background-position 2s;
}
.test:hover {
  background-position: 100% 0%;
  
}
<div class="test"></div>

Upvotes: 0

BillyNate
BillyNate

Reputation: 908

You could use a :before pseudo element to cover the background. If you set the element's opacity to 0 as default and to 1 on :hover you can use the transition-delay to make the second transition appear when the first is done. By overriding the transition-delay on the :hover you can make sure the "mouseleave" also works properly.

Like this (tested in FireFox only):

.one {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 50px auto;
  background-color: gray;
  transition: background-color 1s linear 1s;
}
.one:before {
  content: "";
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: aqua;
  opacity: 0;
  transition: opacity 1s linear;
}
.one:hover {
  background-color: green;
  transition-delay: 0s;
}
.one:hover:before {
  opacity: 1;
  transition-delay: 1s;
}
<div class="one"></div>

Upvotes: 1

Related Questions