How to trigger transition separately on the same properties, and how to transition gradients?

Question

I am playing around with this form and I have few questions, so thank you in advance!

1. The main question: As you can see in the code below there are 3 "transform" properties on both hover and active, and they all have the same transition time. If you click on the button you'll see it's a very quick transition (.3s) and I don't want that. I want it to take maybe 1, 2 seconds so it gives the idea that "it's on its way with the message". If I change the transition time to 2 seconds, the hover will also be affected and 2 seconds of hover effect looks terrible. How can I separate these 2 (or more) things? "scale on hover has its time, scale on active has its time, translate on active has its time ecc".

Wouldn't be awesome if we could give classes to properties in CSS so we can trigger them as we want? (Just an utopic dream)

2. Is there a way to give transition time to gradients? Doesn't seem to work with the usual way.

Thnak you again!

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.form1 {
  height: 100%;
  background: linear-gradient(to right bottom, deepskyblue, pink);
  margin: 10px;
  padding: 50px 150px;
  display: flex;
  flex-direction: column;
  font-family: helvetica;
  font-size: 14px;
}

.space:focus {
  outline: none;
}

.space {
  width: 300px;
  border: none;
  padding: 3px;
  border-radius: 3px;
}

.label1 {
  align-self: center;
}

.submit {
  width: 300px;
  align-self: center;
  background: linear-gradient(to top left, rgb(255,105,200), aqua);
  border: none;
  border-radius: 5px;
  padding: 5px;
  font-family: verdana;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 1px 1px 5px rgb(50,50,50);
  letter-spacing: .1px;
  outline: none;
  transition: transform .3s;
}

.submit:hover {
  background: linear-gradient(to top left, rgb(255,105,200), deepskyblue, aqua);
  transform: scale(1.1);
  border: 1px solid rgb(150,150,200);
}

.submit:active {
  transform: scale(.8);
  background: linear-gradient(to top left, rgb(235,105,200), aqua);
  transform: translateX(1000px);
}

    <div class="form1">
      <div class="label1">
      <label for="name">Name</label><br>
      <input class="space" type="text" id="name"><br><br>
      </div>

      <div class="label1">
      <label for="email">E-mail</label><br>
      <input class="space" type="email" id="email"><br><br>
      </div>

      <div class="label1">
      <label for="message">Message</label><br>
      <textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br><br>
      </div>

      <input type="submit" class="submit" value="Send">
    </div>

Answer 1

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.form1 {
  display: flex;
  flex-direction: column;
  margin: 10px;
  height: 100%;
  padding: 50px 150px;
  overflow: hidden;
  font: 14px helvetica;
  background: linear-gradient(to right bottom, deepskyblue, pink);
}

.space:focus {
  outline: none;
}

.space {
  width: 300px;
  padding: 3px;
  border: none;
  border-radius: 3px;
}

.label1 {
  align-self: center;
}

.submit {
  align-self: center;
  width: 300px;
  padding: 5px;
  border: none;
  border-radius: 5px;
  outline: none;
  font: 600 14px verdana;
  letter-spacing: .1px;
  cursor: pointer;
  box-shadow: inset 0px 0px 1px 0px rgba(0, 0, 0, 0), 1px 1px 5px 0px rgba(50, 50, 50, 1);
  background-image: linear-gradient(to top left, rgb(255, 105, 200), deepskyblue, aqua);
  background-size: 100% 300%;
  background-position: 0% 50%;
  transform: scale(1) translateX(0vw);
  transition: .5s ease-in-out;
}

.submit:hover {
  box-shadow: inset 0px 0px 1px 0px rgba(150, 150, 200, 1), 1px 5px 10px -4px rgba(50, 50, 50, .9);
  background-position: 0% 100%;
  transform: scale(1.1) translateX(0vw);
  transition: transform .3s ease-in, background-position .9s linear;
}

.submit:active {
  background-position: 0% 50%;
  transform: scale(.8) translateX(100vw);
  transition: 2s cubic-bezier(.42, -0.29, .83, 1.12);
}

<div class="form1">
  <div class="label1">
    <label for="name">Name</label><br>
    <input class="space" type="text" id="name"><br><br>
  </div>

  <div class="label1">
    <label for="email">E-mail</label><br>
    <input class="space" type="email" id="email"><br><br>
  </div>

  <div class="label1">
    <label for="message">Message</label><br>
    <textarea class="space placeholder" name="name" rows="8" cols="50" onfocus="this.placeholder=''" onblur="this.placeholder='Write your message here'"></textarea><br><br>
  </div>

  <input type="submit" class="submit" value="Send">
</div>