Delay in CSS transitions

Refresh

November 2018

Views

530 time

2

I have 2 images on top of each other, positioned absolute, in my example they are square but in my real project they are pngs with some transparency in the borders so the one in the back needs to be hidden until it appears on hover.

My problem is I need the transition to have some kind of delay so that the back pic appears a bit before the one on top so you don't see the background in between. I have made a fiddle to illustrate this: http://jsfiddle.net/L21sk0oh/

You can clearly see the red from the background, that shouldn't happen. Also there is some weird moving going on, I haven't noticed this in my actual project.

Also my HTML:

<div class="product1">
    <img class="active" src="http://lorempixel.com/400/200/sports" alt="">
    <img class="inactive" src="http://lorempixel.com/400/200/" alt="">
</div>

And my css:

body{
    background: red;
}
.product1{
  position: relative;
    width: 400px;
    height: 200px;
}

img{
  position: absolute;
  top:0;
  left:0;
}

.product1 img.active{
  transition: all 1s ease-in-out;
  opacity: 1;
}

.product1 img.inactive{
  transition: all 1s ease-in-out;
  opacity: 0;
}

.product1:hover img.active{
  opacity: 0;
}

.product1:hover img.inactive{
  opacity: 1;
}

1 answers

1

Можно указать значение для transition-delayимущества .

В этом случае, я добавил 1sзадержку перехода сокращенный из .product1 img.active:

Обновленный пример

.product1 img.active {
  transition: all 1s 1s ease-in-out;
  opacity: 1;
}

Выше, эквивалентно:

.product1 img.active{
  transition: all 1s ease-in-out;
  transition-delay: 1s;
  opacity: 1;
}

Убедитесь , что вы добавлять свойство перехода сокращенного в правильном порядке.