Replicating a transition effect


#1

I’m trying to implement a transition delay to this code.
How would this be done?
I’m confused now about what code I would be using to do this.

And am I able to do this with the way the code is set up?
It may not be possible to do, I’m not sure.
https://jsfiddle.net/2sumv0hj/1/

Like the one used here:

.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  -webkit-transition-delay: 0s, 800ms;
  -moz-transition-delay: 0s, 800ms;
  transition-delay: 0s, 800ms;
}

Additional code:
This may be more complicated than I had originally thought.

.videoPoster {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: pointer;
  border: 0;
  outline: none;
  background-position: 50% 50%;
  background-size: 100% 100%;
  background-size: cover;
  text-indent: -999em;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity 800ms, height 0s;
  -moz-transition: opacity 800ms, height 0s;
  transition: opacity 800ms, height 0s;
  -webkit-transition-delay: 0s, 0s;
  -moz-transition-delay: 0s, 0s;
  transition-delay: 0s, 0s;
  &:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border: 5px solid $color-button;
    border-radius: 100%;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;
  }
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    margin: -20px 0 0 -10px;
    border-left: 40px solid $color-button;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    -webkit-transition: border-color 300ms;
    -moz-transition: border-color 300ms;
    transition: border-color 300ms;

This one has a really more smoother transition I’m trying to implement.

I’m not sure how I would recreate this transition delay effect on my code.


#2

What do you mean by a transition-delay exactly?

A transition-delay is a period of time to wait before a transition occurs. In your code there is no transition so a delay would result in nothing happening when clicked and then after a delay immediately changing to something else.

I’m guessing that you don’t actually want a transition-delay as such but a transition effect from your cover to revealing the player. Not a delay at all.

If I am guessing correctly then you should know that you cannot animate from display:block to display:none as there are no intermediate measures. Its either hidden or its not. What you would usually do is animate the opacity of an element from 1 to zero over a period of time and once the opacity animation has finished you then move the element off screen rather than display:none.

If that’s what you meant then you can try the following code to replace your cover code.

.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease,background 3s ease, left 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .hide {
  opacity:0;
  left:-999em;
}

.hide {
  /*display: none; removed*/
}

As I said this is mostly guesswork as I;m not sure exactly what you wanted.


#3

I only said delay because I read that in the code, it might be some other kind of delay, but I’m not sure what.

I should’ve been more clear.

On this code this is visible after you click.
https://jsfiddle.net/2sumv0hj/1/

image

On this code it’s not visible after you click.
It’s a more smoother transition.
How this effect done?


#4

I just gave you the code for it in my other post. Did you try it out?


#5

I did, but I didn’t see a difference in the code, I might be putting it in wrong.

See:
https://jsfiddle.net/2sumv0hj/4/


.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 8px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;

}


.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease,background 3s ease, left 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .hide {
  opacity:0;
  left:-999em;
}

#6

You did not take note of what I said.

You have this still in your code:

.hide {
  display: none;
}

I gave you this:

.hide {
  /*display: none; removed*/
}

I also said:


#7

That’s the last line in the jsfiddle.
https://jsfiddle.net/2sumv0hj/4/

.hide {
  display: none;
}

#8

Yes and as I have said three times now it needs to be removed.:slight_smile:

What is it that you don’t understand about removing that line?


#9

How does the other code do it that’s different from how you did it?

I wanted to compare both ways of getting the same result.

And so I’ll have 2 examples.


#10

It’s more or less the same.

It animates the opacity from 1 to zero just like mine but to hide it at the end it reduces the height to zero once the animation has finished. I just moved it off-screen at the end (left:-999em) as it was a safer way to hide.


#11

I want to save both ways in codepen.

The other code also doesn’t use z-index.

What would I change this to:

.wrapg {
  position: relative;
  width: 606px;
  height: 344px;
  margin-top: 8px;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;

}


.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease,background 3s ease, left 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .hide {

#12

Z-index is needed because your example is stacked differently to the other demo to start with. Without z-index your cover goes underneath the player and the animation would not be seen.

To animate the height you would do this:

.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease,background 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .hide {
  opacity:0;
  height:0;
  overflow:hidden;
}

The other demo is built differently to yours so you can’t expect all the code to be the same.

I’m away for a few hours now so play around with it yourself :slight_smile:


#13

I was able to remove all the z-indexes from all my other players.

So, then I would have to figure out how to stack the html differently then.
https://jsfiddle.net/2sumv0hj/9/

This one seems tougher.

How would this have been accomplished?

Even if I had to remove some stuff from the code, how would it have been accomplished?


<div class="wrapg">
  <div class="cover">
    <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
      <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
      <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg>
    <div class="lines"></div>
  </div>

  <iframe class="js-player hide" src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&showinfo=0&autoplay=0&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

</div>

#14

If you don’t want to use z-index on positioned elements (not sure why you think that’s a good idea) then the only way to stack them on top of each other would be using source order. That means the html would need to look like this:

<div class="wrapg">
  <iframe class="js-player hide" src="https://www.youtube-nocookie.com/embed/M7lc1UVf-VE?rel=0&showinfo=0&autoplay=0&iv_load_policy=3&cc_load_policy=0&fs=0&disablekb=1&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  <div class="cover"> <svg class="play" width="600" height="338" viewbox="-3 -0.3 30 24.655">
    <path d="M16.036 11.58l-6-3.82a.5.5 0 0 0-.77.42v7.64a.498.498 0 0 0 .77.419l6-3.817c.145-.092.23-.25.23-.422s-.085-.33-.23-.42z"></path>
    <path d="M12 22.75C6.072 22.75 1.25 17.928 1.25 12S6.072 1.25 12 1.25 22.75 6.072 22.75 12 17.928 22.75 12 22.75zm0-20C6.9 2.75 2.75 6.9 2.75 12S6.9 21.25 12 21.25s9.25-4.15 9.25-9.25S17.1 2.75 12 2.75z"></path>
    </svg>
    <div class="lines"></div>
  </div>
</div>

#15

With my other audio players I fought with myself to try and remove them all until I was finally successful.

I just didn’t like using them for some reason.


#16

About the transition code you used:

transition:opacity 3s ease,background 3s ease, left 0s 3s;

What did the other code use instead to do that?

I saw this, but it didn’t work in the code:
Unless I put it in wrong.

transition-delay: 0s, 0s;
transition: opacity 800ms, height 0s;

https://jsfiddle.net/2sumv0hj/11/


  transition: opacity 800ms, height 0s;
  transition-delay: 0s, 0s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

#17

Yes it uses:

transition: opacity 800ms, height 0s;

But it adds a delay to the height in another rule to stop it being instant.

.videoWrapperActive .videoPoster {
  opacity: 0;
  height: 0;
  transition-delay: 0s, 800ms;
}

I gave you the code for that above:

.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease,background 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .hide {
  opacity:0;
  height:0;
  overflow:hidden;
}

You can probably remove the background from the transition part as the opacity should hide it ok.

.wrapg .cover {
  width: 600px;
  height: 338px;
  position:absolute;
  left:0;
  top:0;
  z-index:2;
  opacity:1;
  transition:opacity 3s ease, height 0s 3s;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}
.wrapg .hide {
  opacity:0;
  height:0;
  overflow:hidden;
}

#18

How would I add transition to include the border as well?

It’s not this code, it’s something else.
transition: border-color 300ms;

Would a transition: all

Work to do everything?


#19

The element called .cover does not have a border. You have the border on something else so you would need to set up transition rules for the element with the border.

Here’s a simple example so see if you can work it out yourself.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.box {
	width:300px;
	height:300px;
	border:10px solid red;
	transition:border .5s ease;
}
.box:hover {
	border-color:transparent;
}
</style>
</head>

<body>
<div class="box"></div>
</body>
</html>

Remember in your example you are producing the lines form a pseudo element and then swapping borders from the wrap to the iframe itself. You should have just changed the border on the wrap and left the iframe alone.

You will probably need to do something like this for the iframe to have its own transition.

.wrapg iframe {
  position: absolute;
  top: -3px;
  left: -3px;
  width: 606px;
  height: 344px;
  border: 3px solid #FA33FC;
  box-sizing: border-box;
  transition:border .5s ease;
}
.wrapg iframe.hide{
  border: 3px solid blue;
}

I’m away now until tomorrow so someone else can jump in :slight_smile:


#20

Maybe something similar to this.

@Ray.H helped me figure out this one.
https://jsfiddle.net/9s5a6rge/2/

.wrapb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 266px;
  height: 266px;
  padding-bottom: 260px;
  background-position: 0 -260px;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 2s;
}

.wrapb::before {
  opacity: 1;
  border: 3px solid #0059dd;
}

Adding it to this one now:
https://jsfiddle.net/2sumv0hj/14/

I tried this:
https://jsfiddle.net/2sumv0hj/15/


.wrapg::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 606px;
  height: 344px;
  opacity: 0;
  border: 3px solid #0059dd;
  box-sizing: border-box;
  transition: all 82s;
}

.wrapg iframe::before {
  opacity: 1;
  border: 3px solid red;
}