Button Transition Effect using class not working accordingly

Question

I would like to get these 3 events triggered on form fill. But all are supposed to be on the same button.

Am able to achieve it using 3 classes i.e.

• "draw dj" which is first event
• "draw1 dj" which is 2nd event
• "draw2 dj" is the final event

This is the form I want to edit.

My Approach

If user completes the edit of 1st field, Event 1 is triggered as classes "draw dj" is added

then when user completes the edit of 2nd field, classes "draw dj" is replaced by "draw1 dj"(This works completely fine)

But when third event is triggered, the transition is not happening instead it converts directly to the final look.

CSS of what I am supposed to get

.draw2 {
    // transition: color 0.25s;
  color: lightgrey; 
  background-image: linear-gradient(rgb(255,123,0),rgb(255,123,0));
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s 0.8s, color 1s 0.5s;
  &:hover{
    color:white;
    background-size:100% 100%;
  }
  &::before,
  &::after {
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  // This covers the top & right borders (expands right, then down)
  &::before {
    top: 0;
    left: 0;
  }

  // And this the bottom & left borders (expands left, then up)
  &::after {
    bottom: 0;
    right: 0;
  }



  // Hover styles
  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-left-color: rgb(255,123,0); // Make borders visible
    border-bottom-color: rgb(255,123,0);
    transition:
      width 0s ease-out, // Width expands first
      height 0s ease-out; // And then height
  }

  &:hover::after {
    border-right-color: rgb(255,123,0); // Make borders visible
    border-top-color: rgb(255,123,0);
    color:white;
    transition:
      border-color 0s ease-out, // Wait for ::before to finish before showing border
      height 0.25s ease-out, // And then exanding width
      width 0.25s ease-out 0.25s; // And finally height
  }
}

---

CSS of what I am getting right now

.draw2 {
    // transition: color 0.25s;
  color: lightgrey; 
  background-image: linear-gradient(rgb(255,123,0),rgb(255,123,0));
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.5s 0.8s, color 1s 0.5s;
  &.dj{
    color:white;
    background-size:100% 100%;
  }
  &::before,
  &::after {
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  // This covers the top & right borders (expands right, then down)
  &::before {
    top: 0;
    left: 0;
  }

  // And this the bottom & left borders (expands left, then up)
  &::after {
    bottom: 0;
    right: 0;
  }



  // Hover styles
  &.dj::before,
  &.dj::after {
    width: 100%;
    height: 100%;
  }

  &.dj::before {
    border-left-color: rgb(255,123,0); // Make borders visible
    border-bottom-color: rgb(255,123,0);
    transition:
      width 0s ease-out, // Width expands first
      height 0s ease-out; // And then height
  }

  &.dj::after {
    border-right-color: rgb(255,123,0); // Make borders visible
    border-top-color: rgb(255,123,0);
    color:white;
    transition:
      border-color 0s ease-out, // Wait for ::before to finish before showing border
      height 0.25s ease-out, // And then exanding width
      width 0.25s ease-out 0.25s; // And finally height
  }
}

Answer 1

After you updated the post, the last thing you're missing is the background-size attribute in draw1 class.

.draw1 {
    background-size: 0% 100%;
    &::before,
    ...

CSS animations need a starting point. You were applying a class with the end value of background size but CSS had no starting point to begin the animation with. Thus, you were getting a "toggle" straight to final value.