What does @keyframes btn-anim1 mean in CSS

[rishithaspurthi]

Sorry this might be a stupid question, but I came across this code for a login form, the part of the code which uses that is this:

 .login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #03e9f4);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #03e9f4);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #03e9f4);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #03e9f4);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

Could somebody tell me what this @keyframes btn-anim1 does? I’d figure out the rest on my own! Thank you.

[zachlankton]

It looks like it is animating the left css property for the .login-box a span:nth-child(1) Do you see a button (or span element actually) “fly in” from the left when this code loads?

[sowg]

@rishithaspurthi

@keyframes

@keyframes is a css rule used to declare animation

@rishithaspurthi

btn-anim1

This is the animation name

@rishithaspurthi

animation: btn-anim1 1s linear infinite;

You can see the animation is declared here

[nivethakrishnan72]

Hi @rishithaspurthi ,

@keyframes are used for animation in CSS. It is mainly used for how you style your animated image either to give a background color for the image or to which direction we have to move the animated image. (top, left, right,bottom).

This link helps to you get a better idea.

An Introduction To CSS Keyframes Animation — Smashing Magazine

[jwilkins.oboe]

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

[rishithaspurthi]

Oh my god, I’m so sorry! This is actually my first day here, I’ll keep that in mind next time! Thank you so much for replying!

[rishithaspurthi]

Thank you so much! I’ve understood it now!

[rishithaspurthi]

Thank you so much for linking the article, it helped me a lot!

[rishithaspurthi]

The html code under span is completely empty, I genuinely don’t see the purpose of adding that animation! But I do understand now that it’s an animation. Thank you so much!