К границе переход не идет - PullRequest
Новая
       7

К границе переход не идет

0 голосов
/ 10 октября 2018

Я работаю над анимацией изображения при наведении. Я добавил border-radius с переходом. Но после добавления анимации здесь также не возникает плавность, что может быть проблемой, переход не работает нормально. Я применил переход к псевдоклассам.,Есть ли другой простой способ сделать это?Может ли кто-нибудь помочь мне в этом указать мне в правильном направлении.Любая помощь будет оценена. 

.image-box {
  position: relative;
  height: 300px;
  width: 500px;
  margin: 200px;
  overflow: hidden;
}

.image-box figure img {
  width: 100%;
}

.image-box figure:before {
  content: '';
  width: 150%;
  height: 100%;
  position: absolute;
  bottom: 10%;
  left: -25%;
  border-bottom-right-radius: 85% 50%;
  border-bottom-left-radius: 85% 50%;
  box-shadow: 0px 60px 0 #ffffff;
  transition: all 0.4s ease-in-out;
  /* 	transition: all 0.4s cubic-bezier(.79,.01,.11,.99); */
}

.image-box figure:after {
  content: '';
  width: 150%;
  height: 100%;
  position: absolute;
  top: 10%;
  left: -25%;
  border-top-right-radius: 85% 50%;
  border-top-left-radius: 85% 50%;
  box-shadow: 0 -60px 0 #ffffff;
  display: block;
  transition: all 0.4s ease-in-out;
  /* 	transition: all 0.4s cubic-bezier(.79,.01,.11,.99); */
  z-index: 4;
}

.image-box:hover figure:before,
.image-box:hover figure:after {
  animation: bounce 0.5s 0.4s;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}

@keyframes bounce {
  0% {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    transition: all 0.5s ease-in-out;
  }
  50% {
    border-bottom-right-radius: 85% 50%;
    border-bottom-left-radius: 85% 50%;
    border-top-right-radius: 85% 50%;
    border-top-left-radius: 85% 50%;
    transition: all 0.5s ease-in-out;
  }
  100% {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    transition: all 0.5s ease-in-out;
  }
}

.image-box figure img {
  width: 100%;
}
<div class="image-box">
  <figure>
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/pr-sample5.jpg" alt="image" />
  </figure>
</div>

1 Ответ

0 голосов
/ 10 октября 2018

Псевдокласс наведения мыши должен находиться в том же элементе, где был определен переход.В вашем случае это было определено в .image-box figure:before и .image-box figure:after.

.image-box figure:hover:before,
.image-box figure:hover:after

Вы использовали псевдокласс :hover на .image-box примерно так: .image-box:hover figure:before,

...