HTML Avoid Starting Animation

Question

I want to animate the background color and transform of a HTML button. When I use the animation, the starting animation is also shown. 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.

@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;

}

<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>

I edited your page. You can look at transation from Full Page view. By the way, I'm not be regarded as skilled about frontend but I don't even do that: `` :) — gurkan, Jun 05 '21 at 19:07

score 0 · Answer 1 · answered Jun 05 '21 at 18:43

0

I'm sorry I couldn't really understand what you actually want but if you can keep the transformation property as it is, if that's what you want it to look like when it's hovered on but you can simply change you navbar button color if you don't like the colors

answered Jun 05 '21 at 18:43

Ok. Thanks trying to for helping!!! – Brian Law Jun 05 '21 at 20:03

HTML Avoid Starting Animation

1 Answers1