CSS Grid Responsive Image Gallery: анимация застревает на своем пути - PullRequest
Новая
       19

CSS Grid Responsive Image Gallery: анимация застревает на своем пути

0 голосов
/ 08 апреля 2019

При наведении курсора на изображение я написал код для анимации сверху. Но во время анимации он застревает на своем пути и приходит на место. Я просто хочу плавного перехода. Ребята, можете ли вы помочь мне разобраться в этом?

Ссылка на мой кодовый номер: https://codepen.io/subin_s/pen/KYgxWX?editors=1100

<div class="grid-container">


  <figure class="grid_item grid_item-1">
    <div class="text" style="text-align:center;">
      JavaScript
      <button class="online_view">View Site</button>
    </div>
    <img class="grid_image" src="https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </figure>


  <figure class="grid_item grid_item-2">
    <div class="text" style="text-align:center;">
      Bootstrap
      <button class="online_view">View Site</button>
    </div>
    <img class="grid_image"  src="https://images.pexels.com/photos/788946/pexels-photo-788946.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
  </figure>


<figure class="grid_item grid_item-3">
  <div class="text" style="text-align:center;">
      HTML / CSS
      <button class="online_view">View Site</button>
    </div>
    <img class="grid_image"  src="https://images.pexels.com/photos/17663/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
  </figure>


<figure class="grid_item grid_item-4">
  <div class="text" style="text-align:center;">
      React JS
      <button class="online_view">View Site</button>
    </div>
    <img class="grid_image"  src="https://images.pexels.com/photos/1927574/pexels-photo-1927574.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
  </figure>


<figure class="grid_item grid_item-5">
  <div class="text" style="text-align:center;">
      Wordpress
      <button class="online_view">View Site</button>
    </div>
    <img class="grid_image" src="https://images.pexels.com/photos/1647976/pexels-photo-1647976.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
  </figure>


<figure class="grid_item grid_item-6">
  <div class="text" style="text-align:center;">
      Grid/Flexbox 
      <button class="online_view">View Site</button>
    </div>
    <img class="grid_image"  src="https://images.pexels.com/photos/942500/pexels-photo-942500.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </figure>


</div>

Я написал код анимации внизу, если вы хотите быстро его увидеть. 

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family: 'Raleway';
}

.grid-container {
  margin: 2rem;
  display: grid;
  grid-template-columns : repeat(3,1fr);
  grid-template-rows: repeat(2, 20vw);
  grid-gap: 10px;
}

.grid_image {
  width:100%;
  height:100%;
  object-fit:cover;
  transition: all 0.5s ease-in-out;
}

.grid_item {
  position: relative;
/*   overflow: hidden will prevent the image scaling to exceed the specified width. It will expand on back */
  overflow: hidden; 
}

/* .grid_item:hover {
  opacity: 0;
   animation: top_overlay 1s linear;
}
 */
/* .grid_item .after {
  position: absolute;
    top: 50%;
  left:50%;
  transform : translate(-50%, -50%);
  width: 100%;
  height: 100%;
    font-size : 2rem;
    display: none;
    color: red;
} */

/* .grid_item:hover .after {
  display: block;
  background: #fff;
  object-fit : cover;
} */

.grid_item:hover .grid_image {
  transform : scale(1.1);
  filter: blur(2px);
}

.text {
  font-size : 1.2rem;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #C0392B;
  font-weight:900;
  display: none;
}

.online_view {
  margin-top: 40px;
  padding: 5px 10px;
  background-color: transparent;
  color: #fff;
  outline:none;
  border: 1px solid yellow;
}

button.online_view {
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

button.online_view:hover{
  background-color: #E8F6F3;
  color: #CA5D46;
}

.grid_item:hover .text {
  display: block;

/*   text to see, otherwise hides in the back */
  z-index: 999;
  animation : slide 0.5s ease;
}


@keyframes slide {
  0% {
    top:-100px;
  }

  25% {
    top: -75px;
  }

  50% {
    top: -50px;
  }

  75% {
    top: -25px;
  }

  100% {
   top:0;
  }
}

Ответы [ 2 ]

1 голос
/ 08 апреля 2019

избегайте 3 анимационных перерывов, если вы хотите плавного перехода. Ниже кода вы можете попробовать заменить: 

.text {
  font-size : 1.2rem;
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #C0392B;
  font-weight:900;
  opacity: 1;
}

.online_view {
  margin-top: 40px;
  padding: 5px 10px;
  background-color: transparent;
  color: #fff;
  outline:none;
  border: 1px solid yellow;
}

button.online_view {
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

button.online_view:hover{
  background-color: #E8F6F3;
  color: #CA5D46;
}

.grid_item:hover .text {
  opacity: 1;
  z-index: 9;
  animation : slide 0.7s ease forwards;
}


@keyframes slide {
  0%{
    top: -50%;
  }
  100% {
    top: 45%;
  }
}

Опять попробуйте упростить ваш код.

0 голосов
/ 08 апреля 2019

Застревание происходило из-за того, что вы добавили много шагов в ключевые кадры 0%, 25%, 50%, ... Также я изменил время для простоты в классах css и с стиля grid_image ease-in-out до ease-in.

Замените ваш код css ниже. 

.grid_image {
  width:100%;
  height:100%;
  object-fit:cover;
->transition:0.5s ease-in; or transition:all 0.5s ease-in;
}

.grid_item:hover .text {
  display: block;
  /*text to see, otherwise hides in the back */
  z-index: 999;
->animation : slide 0.7s ease-in;
}

    @keyframes slide {
      0%{
        top:-100px;
      }

      75% {
        top: -25px;
      }
...