Button Animation in HTML/CSS-CodePudding

I have the following code. There's two things I would like to fix:

When you click the submit button, you will see a sudden color change, how can I remove that? It looks like a glitchy animation. As soon as you click the submit button, you will see the sudden color change into something yellowish or whitish.
When you click the submit button, and the animation plays, I want the checkmark with the circle background to be displayed towards the left, or at the same place where the button is. Right now, the checkmark and the circle are displayed more towards the right, but how can I make it so I make them display the same place where the button is?

Any suggestions? Thanks

var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i  ) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1200,
    height: 20,
    width: 200,
    backgroundColor: "#D3D3D3",
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 1px;
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 100px;
  top: 25%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #0563bb;
}

svg {
  width: 20px;
  position: absolute;
  top: 25%;
  left: 100px;
  transform: translateY(-50%) translateX(-50%);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div  data-aos="fade-up">
    <div >
      <div >
        <div >
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div >
                <div >Submit</div>
              </div>
              <div ></div>
              <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path   d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

update

the alignment near the bottom of the contact form is off right after the submit button, how can I fix this?

My output:

Expected Output:

CodePudding user response：

I played a little with your animation...

About the sudden color change, I made it change before the transformation occurs (button to progress-bar). It looks smoother now, IMO.
About the final position, I changed the CSS rule for svg about the left property AND added a left: 26 to the .progress-bar last animation step.

var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i  ) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 100,
    backgroundColor: "#D3D3D3", // Change the color here.
  })
  .add({
    targets: ".button",
    duration: 1200,
    height: 20,
    width: 200,
    //backgroundColor: "#D3D3D3", // Not here!
    border: "0",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 0,
    duration: 1
  })
  .add({
    targets: ".progress-bar",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb",
    left: 26  // Added to position at the left, aligned with the rest
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    //complete: () =>
      //setTimeout(() => $('#my-form').submit(), 100) // Commented just to see the result longer...
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}

/* Contact Form */

input[type=text],
[type=email],
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #555;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type="text"]:focus,
input[type="email"]:focus,
#subject:focus {
  background: var(--bgFormElsFocus);
  transform: scale(1.02);
  transition: transform 0.2s ease-in-out;
}

input[type=submit]:hover {
  opacity: 0.9;
}

.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}

.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

.shakingErr {
  border-color: red;
  animation: shake 0.82s forwards;
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}


/* fancy button styles */

.buttonWrapper {
  height: 20px; /* For the button vertical alignement */
  width: 100%;
  position: relative;
  margin-top: 0.9em;  /* For the button vertical alignement */
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: absolute;
  top: 25%;
  transform: translateY(-50%);
  left: 0;
  cursor: pointer;
  border-radius: 1px;
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  top: 50%;
  transform: translateY(-52%);
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position: absolute;
  height: 20px;
  width: 0;
  left: 100px;
  top: 25%;
  border-radius: 200px;
  transform: translateY(-50%) translateX(-50%);
  background: #0563bb;
}

svg {
  width: 20px;
  position: absolute;
  top: 25%;
  left: 26px; /* CHANGED - was 100px */
  transform: translateY(-50%) translateX(-50%);
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
  </script>
  <!--/script-->
  <!--script src="http://code.jquery.com/jquery-1.11.3.min.js">
  </script-->
  <!--link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet"-->
  <!--script src="lib/jquery-1.11.3.min.js" type="application/javascript"></script-->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
  <!-- start contact section -->
  <section id="contact">
    <div  data-aos="fade-up">
      <div >
        <div style="text-align:center">
          <div >
            <h2>
              <br/>Get In Touch
            </h2>
          </div>
          <p>Feel Free To Reach Out To Me Through This Form! </p>
        </div>
        <div >
          <div >
            <form name="myform" action="#" id="my-form" method="POST" novalidate>
              <label for="firstname">First Name</label>
              <input type="text" id="first name" name="firstname" placeholder="Your First Name.." required>
              <label for="lastname">Last Name</label>
              <input type="text" id="lastname" name="lastname" placeholder="Your Last Name.." required>
              <label for="email">Email:</label>
              <input type="email" id="email" name="email" placeholder="Your Email.." required>
              <label for="subject">Subject</label>
              <textarea id="subject" name="subject" placeholder="Lets Collaborate.." style="height:170px" required></textarea>
              <div class='buttonWrapper'>
                <div >
                  <div >Submit</div>
                </div>
                <div ></div>
                <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path   d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- End Contact Section -->
  <script src="script.js"></script>
</body>

</html>

CodePudding user response：

var basicTimeline = anime.timeline({
  autoplay: false,
});

var pathEls = $(".check");
for (var i = 0; i < pathEls.length; i  ) {
  var pathEl = pathEls[i];
  var offset = anime.setDashoffset(pathEl);
  pathEl.setAttribute("stroke-dashoffset", offset);
}

basicTimeline
  .add({
    targets: ".text",
    duration: 1,
    opacity: "0"
  })
  .add({
    targets: ".button",
    duration: 1,
    background: "#FFFFFF",
  })
  .add({
    targets: ".button",
    duration: 600,
    height: 20,
    width: 200,
    border: "0",
    background: "#D3D3D3",
    borderRadius: 100
  })
  .add({
    targets: ".progress-bar",
    duration: 2000,
    width: 200,
    easing: "linear"
  })
  .add({
    targets: ".button",
    width: 50,
    height: 50,
    delay: 500,
    duration: 750,
    borderRadius: 80,
    backgroundColor: "#0563bb"
  })
  .add({
    targets: pathEl,
    strokeDashoffset: [offset, 0],
    duration: 200,
    easing: "easeInOutSine",
    complete: () =>
      setTimeout(() => $('#my-form').submit(), 100)
  });


$(".button").click(playButtonAnim);

$(".text").click(playButtonAnim);

function playButtonAnim() {
  basicTimeline.play();
}

/* fancy button styles */

.buttonWrapper {
  height: 80px;
  width: 100%;
  position: relative;
}

.button {
  background: #0563bb;
  height: 40px;
  width: 90px;
  text-align: center;
  position: relative;
  cursor: pointer;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  white-space: nowrap;
  overflow: hidden
}

.text {
  font: .7rem;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
}

.progress-bar {
  position:absolute;
  height: 20px;
  width: 0;
  border-radius: 200px;
  background: #0563bb;
  top: 0;
  left: 0;
}

svg {
  position: relative;
  width: 20px;
  margin: 0 auto;
  display: block;
}

.check {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.js">
</script>

<section id="contact">
  <div  data-aos="fade-up">
    <div >
      <div >
        <div >
          <form name="myform" action="#" id="my-form" method="POST" novalidate>
            <div class='buttonWrapper'>
              <div >
                <div >Submit</div>
              <div ></div>
                          <svg x="0px" y="0px" viewBox="0 0 25 30" style="enable-background:new 0 0 25 30;">
                  <path   d="M2,19.2C5.9,23.6,9.4,28,9.4,28L23,2" />
                </svg>
                            </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>