How to animate linear-gradient from top right to bottom left?-CodePudding

In my code, on hover the direction of linear-gradient animation is like counterclockwise, how can do it stright linear from top right to bottom left?

.boxstyle
{
  background-color:rgba(0,69,255,1);
  background-size: 0% 100%;
  transition: background-color .5s;
  width: 150px;
  height: 150px;
}

.boxstyle:hover
{
  background-image:linear-gradient(to left bottom, rgba(189,41,242,0) 0%, rgba(189,41,242,0) 40%, rgba(189,41,242, 0.9) 100%);
  background-repeat:no-repeat;
  background-size: 200% 100%; 
  transition:background-size 1s, background-color 1s;
}

<div >hover it</div>

CodePudding user response：

If you really want the pink to start at the top right and move to the bottom left you could use before and after pseudo elements, the before with just the color, the after also with the linear-gradient.

The after pseudo element moves diagonally across to the bottom left on hover of the main element.

.boxstyle {
  width: 150px;
  height: 150px;
  position: relative;
  overflow: hidden;
}

.boxstyle::before,
.boxstyle::after {
  content: '';
  position: absolute;
  z-index: -1;
}

.boxstyle::before {
  background-color: rgba(0, 69, 255, 1);
  width: 100%;
  height: 100%;
}

.boxstyle::after {
  background-image: linear-gradient(to left bottom, rgba(189, 41, 242, 0) 0%, rgba(189, 41, 242, 0) 40%, rgba(189, 41, 242, 0.9) 100%);
  bottom: 100%;
  left: 100%;
  transition: all 1s linear;
  width: 200%;
  height: 200%;
}

.boxstyle:hover::after {
  bottom: -10%;
  left: -10%;
}

<div >hover it</div>

Old comment: This fits your verbal description of the effect desired, but I suspect it isn't exactly what you intended - did you want it more 'blendy' and subtle, becoming the final picture only at the very end?

UPDATE: Since seeing your images this snippet uses an after that has twice the dimensions of the main element so spreading out the colors more. It 'settles' on a hover a bit beyond the bottom left.

CodePudding user response：

You can try like below. Invert the positions to get the opposite direction. More details: Using percentage values with background-position on a linear-gradient

.boxstyle {
  background: linear-gradient(to top right, #0000 40%, rgb(189 41 242/0.9) 100%);
  background-size: 200% 200%;
  background-position: 0% 100%;
  background-color: rgba(0, 69, 255, 1);
  transition: .5s;
  width: 150px;
  height: 150px;
}

.boxstyle:hover {
  background-position: 100% 0;
}

<div >hover it</div>

CodePudding user response：

If you prefer the pink color area to travel through the box (from top right corner to bottom left corner), it can be implemented by setting the linear-gradient so that has the pink area in the middle.

Example:

.boxstyle {
  background: linear-gradient(to top right, #0000 10%, rgb(189 41 242/0.9) 40%, rgb(189 41 242/0.9) 60%, #0000 90%);
  background-size: 500% 500%;
  background-position: 0% 100%;
  background-color: rgba(0, 69, 255, 1);
  transition: .5s ease-in-out;
  width: 150px;
  height: 150px;
  color: #fff;
}

.boxstyle:hover {
  background-position: 100% 0;
}

<div >hover it</div>