Recommand · June 5, 2021 0

HTML Avoid Starting Animation

I want to animate the background color and transform of a HTML button. When I use the animation, the starting animation is also shown. You cannot see it on the JSFiddle, but because the background color of the button is green, when I open the page, the background color is animated from white to green. I don’t want this animation, but I still want to keep the animation when the button is hovered on.

HTML:

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body class = "body">

        <header class = "body-header">
            <h2 class = "body-header-h2">
                Test
            </h2>
            <nav class = "body-header-nav">
                <ul class = "body-header-nav-ul">
                    <li class = "body-header-nav-ul-li">
                        <a href = "/" class = "body-header-nav-ul-li-a">
                            Test1
                        </a>
                    </li>
                    <li class = "body-header-nav-ul-li">
                        <a href = "/about" class = "body-header-nav-ul-li-a">
                            Test2
                        </a>
                    </li>
                    <li class = "body-header-nav-ul-li">
                        <a href = "/join" class = "body-header-nav-ul-li-a">
                            Test3
                        </a>
                    </li>
                    <li class = "body-header-nav-ul-li">
                        <a href = "/releases" class = "body-header-nav-ul-li-a">
                            Test4
                        </a>
                    </li>
                </ul>
            </nav>
            <a href = "/login" class = "body-header-a">
                <button class = "body-header-a-button">
                    Button
                </button>
            </a>
        </header>

    </body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap');

:root {

  --navbar-text-size: 18px;
  --navbar-text-color: hsla(240, 100%, 99%, 1);
  --background-color-A: hsla(160, 100%, 75%, 1);
  --background-color-B: hsla(203, 92%, 75%, 1);
  --navbar-background-color: hsla(0, 0%, 31%, 1);
  --navbar-text-color-hover: hsla(195, 100%, 50%, 1);
  --navbar-light-font-weight: 300;
  --navbar-heavy-font-weight: 600;
  --navbar-button-background-color: hsla(157, 100%, 49%, 1);
  --navbar-button-background-color-hover: hsla(157, 100%, 49%, 0.8);

}

.body {

  margin: 0px;
  padding: 0px;
  background: var(--background-color-A);
  background: -webkit-linear-gradient(to right, var(--background-color-A), var(--background-color-B));
  background: linear-gradient(to right, var(--background-color-A), var(--background-color-B));
  box-sizing: border-box;

}

.body-header {

  display: flex;
  padding: 15px 10%;
  align-items: center;
  justify-content: space-between;
  background-color: var(--navbar-background-color);

}

.body-header-h2 {

  color: var(--navbar-text-color);
  font-size: var(--navbar-text-size);
  font-family: "Poppins", sans-serif;
  font-weight: var(--navbar-heavy-font-weight);
  text-decoration: none;

}

.body-header-nav-ul {

  list-style: none;

}

.body-header-a-button {

  color: var(--navbar-text-color);
  border: none;
  cursor: pointer;
  padding: 9px 25px;
  font-size: var(--navbar-text-size);
  font-family: 'Poppins', sans-serif;
  font-weight: var(--navbar-heavy-font-weight);
  border-radius: 50px;
  text-decoration: none;
  background-color: var(--navbar-button-background-color);

  transition-duration: 0.5s;
  transition-property: transform, background-color;
  -o-transition-duration: 0.5s;
  -o-transition-property: transform, background-color;
  -moz-transition-duration: 0.5s;
  -moz-transition-property: transform, background-color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-property: transform, background-color;

}

.body-header-nav-ul-li {

  color: var(--navbar-text-color);
  display: inline-block;
  padding: 0px 20px;
  font-size: var(--navbar-text-size);
  font-family: 'Poppins', sans-serif;
  font-weight: var(--navbar-light-font-weight);
  text-decoration: none;

}

.body-header-nav-ul-li-a {

  color: var(--navbar-text-color);
  font-size: var(--navbar-text-size);
  font-family: 'Poppins', sans-serif;
  font-weight: var(--navbar-light-font-weight);
  text-decoration: none;

}

.body-header-a-button:hover {

  transform: scale(0.95);
  background-color: var(--navbar-button-background-color-hover);

  /* transition-duration: 0.5s;
    transition-property: all;
    -o-transition-duration: 0.5s;
    -o-transition-property: all;
    -moz-transition-duration: 0.5s;
    -moz-transition-property: all;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-property: all; */

}

.body-header-nav-ul-li-a:hover {

  color: var(--navbar-text-color-hover);

  transition-property: color;
  transition-duration: 0.5s;

}

Here is the link: Link Thanks for helping!