마우스를 올리면 원형 테두리가 애니메이션되지 않습니다.

질문

원의 테두리에 마우스를 가져 가면 점차 채워지도록 애니메이션을 적용하려고합니다. 지금까지 내 @keyframes애니메이션 코드에는 운이 없습니다. 내 키 프레임이 내 .circle : hover속성의 값을 대상으로하기 때문에 여기서 내가 뭘 잘못하고 있는지 정확히 모르겠습니다.

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

Expand snippet

답변1

CSS에서 불완전한 "매개 변수"를 전달하고 있습니다. 애니메이션을 사용할 때 필요한 매개 변수 시퀀스는 다음과 같습니다.

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

보간 기능은 애니메이션이 실행되는 방식입니다. 선형 적으로? 빨리 시작하고 천천히 끝날까요? 아니면 맞춤형 리듬을 따르시겠습니까?

예:

animation: border 1s linear;

그러나 애니메이션을 시작하는 데 걸리는 시간을 결정하는 것과 같이 사용할 수는 있지만 필수는 아닌 하위 매개 변수가 있습니다. 자세한 내용은 이 도움말 을 참조하세요.

답변2

CSS를 잘못 사용하고 있습니다.

애니메이션의 이름 만 설정했지만 실제로 수행하려는 작업을 이해하기에는 충분하지 않습니다. 이렇게하려면 보간 함수 와 기간 을 제공해야합니다.

그 외에도 Safari 및 Chrome과 같은 브라우저에 필요한 -webkit-animation 을 추가했지만 후자는 그렇지 않습니다. 내가 아는 한 버전 43에서 지원하십시오.

어쨌든 올바른 CSS의 예는 다음과 같습니다.

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

여기에서 전체 작동 코드 / 데모를 참조하십시오. https://jsfiddle.net/9r08aoty/3/

답변3

이를 위해 애니메이션 / 키 프레임이 필요하지 않습니다. 간단한 전환이 가능합니다.

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

Expand snippet

 

 

 

 

출처 : https://stackoverflow.com/questions/48351235/circle-border-not-animating-on-hover