Clicking on the play button should fade orange into another color

HTML & CSS
1

This is what I have, I’m confused on how that would be set up.

This doesn’t seem correct because, the orange change to blue on click happens too slow.

https://jsfiddle.net/ug5bcv2r/4/

.video-one {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 1s;
  background: orange;
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  animation: fadeInImage 2s ease-in 2s forwards;
  opacity: 0;
}

@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}

.slide .video-one {
  background: blue;
  background-position: 0 0;
  animation: fadeInImage2 1ms ease 0s forwards;
  opacity: 1;
}

@keyframes fadeInImage2 {
  to {
    opacity: 1;
  }
}
2

Wouldn’t I be able to use transition here?

I think it would need to be an animation because you can’t transition from an animation.

This is wrong: https://jsfiddle.net/xokm1nbt/2/

.video-one {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 2s;
  background: orange;
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  animation: fadeInImage 2s ease-in 2s forwards;
  opacity: 0;
}

@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}

.slide .video-one {
  background: blue;
  transition: 2s ease-in;
  transition-delay: 2s;
}
3

I’m assuming .slide would be added to it?

4

Here was an attempt: https://jsfiddle.net/c7p4L2yt/1/

I added in this:

.video-one::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in 2s;
  background-color: pink;
}

.curtain1.slide .video-one::before {
  opacity: 1;
}

To the css:

.video-one {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 2s;
  background: orange;
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  animation: fadeInImage 2s ease-in 2s forwards;
  opacity: 0;
}

@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}

.video-one::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in 2s;
  background-color: pink;
}

.curtain1.slide .video-one::before {
  opacity: 1;
}.video-one {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  transition: all 8s ease-in 0s;
  transition-delay: 2s;
  background: orange;
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 1;
  animation: fadeInImage 2s ease-in 2s forwards;
  opacity: 0;
}

@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}

.video-one::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease-in 2s;
  background-color: pink;
}

.curtain1.slide .video-one::before {
  opacity: 1;
}
5

From post 1:

It takes 8 seconds because you put a transition of 8s on it.

transition: all 8s ease-in 0s;

Just reduce that transition time and it will be quicker.

Yes if you turn the animation off then you can use transition.

.slide .video-one {
  background: blue;
  transition: background 1s ease-in 0s,transform 8s ease-in 0s;
  animation: none;
  opacity: 1;
}

Note I put 1s for the background color change and 8s for the transform slide effect.

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.