Kevin Powell - Community•12mo ago

Animation problem

hello guys, I am working with my self project, I just want to make my btn background is to make animation, and I dont know why the animation is not working. heres my code for css and my html. can u check guys whats wrong in my code. Thank you!

2 Replies

clevermissfox•12mo ago

you probably need to increase your background-size to be bigger than the button so the position has space to move around

Coder_Carl•12mo ago

this is a super basic example I played around with a year or so ago https://codepen.io/CA-Carl/full/wvPvEYm incase you arent using scss this is the basic html setup

  <li class="gradient-bground btn">
    <a>
      About
    </a>
  </li>

  <li class="gradient-bground btn">
    <a>
      About
    </a>
  </li>

this is the basic css I left the styling for the class .btn because it explains the sizing decisions

/**
  Buttons
*/
.btn {
  width: 12ch;
  height: 1.5em;
  color: var(--dark-bg);
}
.btn > * {
  line-height: 1.25em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: letter-spacing 0.25s ease;
}

.gradient-bground {
  position: relative;
  background: linear-gradient(to right, var(--purple) 0%, var(--pink) 50%, var(--purple) 100%);
  background-size: 200%;
  background-position: left center;
}
.gradient-bground > * {
  position: absolute;
  inset: 0.125em;
}
.gradient-bground:hover, .gradient-bground:focus-within {
  animation: gradient 2s ease infinite alternate, glow 2s ease-in-out infinite alternate;
}
.gradient-bground:hover > *, .gradient-bground:focus-within > * {
  color: var(--darkest);
}

@keyframes gradient {
  from {
    background-position: left center;
  }
  to {
    background-position: right center;
  }
}
@keyframes glow {
  from {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.11), 0 1px 3px rgba(255, 255, 255, 0.2);
    outline: 1px solid rgba(255, 255, 255, 0.2);
  }
  to {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.11), 0 1px 3px rgba(255, 255, 255, 0.6);
    outline: 1px solid rgba(255, 255, 255, 0.45);
  }
}

/**
  Buttons
*/
.btn {
  width: 12ch;
  height: 1.5em;
  color: var(--dark-bg);
}
.btn > * {
  line-height: 1.25em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  transition: letter-spacing 0.25s ease;
}

.gradient-bground {
  position: relative;
  background: linear-gradient(to right, var(--purple) 0%, var(--pink) 50%, var(--purple) 100%);
  background-size: 200%;
  background-position: left center;
}
.gradient-bground > * {
  position: absolute;
  inset: 0.125em;
}
.gradient-bground:hover, .gradient-bground:focus-within {
  animation: gradient 2s ease infinite alternate, glow 2s ease-in-out infinite alternate;
}
.gradient-bground:hover > *, .gradient-bground:focus-within > * {
  color: var(--darkest);
}

@keyframes gradient {
  from {
    background-position: left center;
  }
  to {
    background-position: right center;
  }
}
@keyframes glow {
  from {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.11), 0 1px 3px rgba(255, 255, 255, 0.2);
    outline: 1px solid rgba(255, 255, 255, 0.2);
  }
  to {
    box-shadow: 0 4px 6px rgba(255, 255, 255, 0.11), 0 1px 3px rgba(255, 255, 255, 0.6);
    outline: 1px solid rgba(255, 255, 255, 0.45);
  }
}

Carl Davidson

CodePen

shiny menu animation

...

Gaming

Programming

Animation problem