Наведите курсор мыши на анимацию CSS - PullRequest
Новая
       77

Наведите курсор мыши на анимацию CSS

0 голосов
/ 22 февраля 2019

Я пытаюсь сделать парение после анимации CSS.Анимация изменяет размер и цвет круга с помощью ключевых кадров, однако после завершения анимации цвет, на котором она заканчивается, не будет меняться при наведении, как обычно. 

body {
  background: black;
}

#panorama {
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 4vw;
  left: 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

#panorama.large {
  width: 17vw;
  height: 17vw;
}

#panorama.black {
  background-color: black;
  border: solid rgba(255, 255, 255, 0.4) 1px;
  -webkit-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
  -moz-filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

#panorama.glow {
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
}

#panorama.large.black.glow {
  animation-name: panoramaLargeBlackGlowDownTurnOn;
}

@keyframes panoramaLargeBlackGlowDownTurnOn {
  0% {
    width: 17vw;
    height: 17vw;
    background-color: black;
  }
  99% {
    background-color: black;
  }
  100% {
    width: 3.5vw;
    height: 3.5vw;
    background-color: white;
    -webkit-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
    -moz-filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
  }
}

#panorama.large.black.glow:hover {
  background-color: red !important;
}
<a href="#">
  <div id="panorama" class="large black glow"></div>
</a>

или см. Код здесь: JSFiddle

1 Ответ

0 голосов
/ 22 февраля 2019

Это потому, что вы используете forwards, что заставит использовать последнее состояние вашей анимации, и вы не сможете его переопределить.Чтобы преодолеть это, вы можете использовать переменную CSS для определения окраски фона и просто изменить переменную, чтобы изменить фон 

body {
  background: black;
}

#panorama {
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 4vw;
  left: 0;
  border-radius: 50%;
}

#panorama.large {
  width: 17vw;
  height: 17vw;
}

#panorama.black {
  background-color: black;
  border: solid rgba(255, 255, 255, 0.4) 1px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

#panorama.glow {
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
}

#panorama.large.black.glow {
  animation-name: panoramaLargeBlackGlowDownTurnOn;
}

@keyframes panoramaLargeBlackGlowDownTurnOn {
  0% {
    width: 17vw;
    height: 17vw;
    background-color: black;
  }
  99% {
    background-color: black;
  }
  100% {
    width: 3.5vw;
    height: 3.5vw;
    background-color: var(--c,#fff);
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
  }
}

#panorama.large.black.glow:hover {
  --c: red;
}
<a href="#">
  <div id="panorama" class="large black glow"></div>
</a>

Другая идея заключается в использовании вставной тени для рамки для окраски: 

body {
  background: black;
}

#panorama {
  position: fixed;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 4vw;
  left: 0;
  border-radius: 50%;
}

#panorama.large {
  width: 17vw;
  height: 17vw;
}

#panorama.black {
  background-color: black;
  border: solid rgba(255, 255, 255, 0.4) 1px;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.6));
}

#panorama.glow {
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0.7s;
  animation-fill-mode: forwards;
}

#panorama.large.black.glow {
  animation-name: panoramaLargeBlackGlowDownTurnOn;
}

@keyframes panoramaLargeBlackGlowDownTurnOn {
  99% {
    background-color: black;
  }
  100% {
    width: 3.5vw;
    height: 3.5vw;
    background-color: #fff;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 1));
  }
}

#panorama.large.black.glow:hover {
  box-shadow:0 0 0 50vw red inset;
  border-color:rgba(255, 0, 0, 0.6); /*we also change the border since background is also visible under the border*/
}
<a href="#">
  <div id="panorama" class="large black glow"></div>
</a>
...