CODEWITHSUNDEEP
htmlcss
J.G.Sable
J.G.Sable

Reputation: 1388

Circle Border not animating on hover

I'm trying to animate the border of a circle when I hover over it so that it fills up gradually. So far no luck on my @keyframes animation code. I'm not exactly sure what I'm doing wrong here as my keyframes is targeting the value of my .circle:hover property.

enter image description here

.circle {
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #5d0b3c;
}

#skills .text {
  position: absolute;
  top: 38px;
  left: 30px;
  width: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font: 18px sans-serif;
  transition: opacity .2s ease;
}

.circle:hover {
  animation: border;
}

@keyframes border {
  0% {
    border: none;
  }
  25% {
    border: 5px solid pink;
  }
  50% {
  }
  75% {
  }
  100% {
  }
}
<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="card">
                <div class="card-body" style="border: 1px solid">
                    <div class="circle">
                        <span class="text">skill 1</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 173

Answers (3)

Facundo Corradini
Facundo Corradini

Reputation: 3913

You don't need animation / keyframes for that, a simple transition will do

.circle {
  box-sizing:border-box; /* <<== so the circle doesn't grow with the border */
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #5d0b3c;
}

#skills .text {
  position: absolute;
  top: 38px;
  left: 30px;
  width: 60px;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  font: 18px sans-serif;
  transition: opacity .2s ease;
}

.circle:hover {
  border:5px solid pink;
  transition:border .5s ease; /*<<== simple transition */
}
<div class="container">
    <div class="row">
        <div class="col-3">
            <div class="card">
                <div class="card-body" style="border: 1px solid">
                    <div class="circle">
                        <span class="text">skill 1</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Siyah
Siyah

Reputation: 2897

You are using the CSS wrongly.

You only set the name of the animation, but that is not enough for it to understand what you really want to do. To do so, you need to give an interpolation function and a duration.

Beside that, I've also added -webkit-animation as that is needed for browsers like Safari and Chrome, although the latter won't support it from version 43, as far as I know.

Anyway, an example of correct CSS is this:

.circle:hover {
    -webkit-animation: border 1s linear;
  animation: border 1s linear;
}

Please see the full working code / demo here: https://jsfiddle.net/9r08aoty/3/

Upvotes: 0

SirPedr
SirPedr

Reputation: 127

You are passing incomplete "parameters" in CSS. When we are going to use an animation, the required parameter sequence is:

animation: [name] [duration] [interpolation function]

Interpolation function is how the animation will be executed: linearly? Will it start fast and end slowly? Or will you follow a custom rhythm?

Example:

animation: border 1s linear;

However, there are sub-parameters that you can use but are not required, such as deciding how long the animation will take to start. For more details, you can see this article.

Upvotes: 2

Related Questions