CODEWITHSUNDEEP
cssborder
Kenyis
Kenyis

Reputation: 103

Animate a border with CSS

I want to recreate a CSS animation in my computer (local) but it's not working, when I try the code in Codepen it's working, what am I doing wrong?

Here is the code: https://codepen.io/jvera/pen/gXxgXx

{
  background: none;
  border: 0;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 2px #f45e61;
  color: #f45e61;
  font-size: inherit;
  font-weight: 700;
  margin: 1em;
  padding: 1em 2em;
  text-align: center;
  text-transform: capitalize;
  vertical-align: middle;
}
.draw {
  overflow: hidden;
  position: relative;
}
.draw::before, .draw::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.draw::before {
  top: 0;
  left: 0;
  border-top-color: #60daaa;
  border-right-color: #60daaa;
  animation: border 2s infinite;
}
.draw::after {
  bottom: 0;
  right: 0;
  animation: border 2s 1s infinite, borderColor 2s 1s infinite;
}

@keyframes border {
  0% {
    width: 0;
    height: 0;
  }
  25% {
    width: 100%;
    height: 0;
  }
  50% {
    width: 100%;
    height: 100%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}
@keyframes borderColor {
  0% {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
  }
  50% {
    border-bottom-color: #60daaa;
    border-left-color: #60daaa;
  }
  51% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
  100% {
    border-bottom-color: transparent;
    border-left-color: transparent;
  }
}
<center><h2 class="draw">Titulo</h2><center>

I created the two files and put them into the folder, when I run the HTML file I can't see the animation effect (like the demo) so, what can I do? why I'm not seeing the results?

Thanks.

Upvotes: 2

Views: 3838

Answers (2)

Puka
Puka

Reputation: 1585

I don't know about your HTML & CSS skills but maybe you are doing something wrong with the linking of your stylesheet:

<link rel="stylesheet" href="styles.css">

  1. Be sure to corectly set the paths (look at this example : External CSS) and maybe give a glimpse at the basics of HTML, just in case?

  2. Also, check if the path is relative or absolute:

Relative Paths:

  • index.html
  • /graphics/image.png
  • /help/articles/how-do-i-set-up-a-webpage.html

Absolute Paths:

See the Full reference about the paths.

Hope I helped.

Upvotes: 2

GoofBall101
GoofBall101

Reputation: 308

Try adding the -WebKit-keyframes feature. It might be your browser. Link to how to do it

Upvotes: 0

Related Questions