OnClick transition effects, and understanding the markup code

asasass 2017-12-09 01:32:34 UTC #1

What are all the different types of transition effects I could implement on this code which uses an OnClick method?

This is one way:
https://jsfiddle.net/1qrsd9ks/62/

.playButtonb {
   transition: background 5.0s;

This is another way:
https://jsfiddle.net/1qrsd9ks/70/

 .playButtonb.active{ animation:fade 5s ease; }

 @keyframes fade{
  0% {opacity:0.2;}
  100%{opacity:1;}
 }

Are there any other different ways I can do other things that involve transition?

asasass 2017-12-09 02:02:18 UTC #2

Is there a visual difference between these?

transition: background 5s;
transition:all 5s ease;
transition:5s;
transition:5s ease-in-out;

Does adding ease add anything extra visually to the code? What purpose does it serve?
Does adding ease-in-out add anything extra visually to the code?
What's the purpose of adding all?

Is there a difference between:

transition: background 5s;
and:
transition:5s;

I'm reading this right now:

And this is informative too:
https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

asasass 2017-12-09 02:19:54 UTC #3

Can you add a transition effect to the linear-gradient?

I'm currently trying to find this out.

Right now there is currently a transition on the border, but that doesn't include the linear-gradient also.
https://jsfiddle.net/1qrsd9ks/155/

You can see in the code that the 2 linear-gradient lines down the middle, they change right away, there's no transition applied to them at all.

How would you apply a transition effect to the linear gradient also?

Is this possible to do?

transition: all
https://jsfiddle.net/1qrsd9ks/175/

Wouldn't that apply to the linear-gradient also?

Ray.H 2017-12-09 04:31:25 UTC #4

background-images are not in the the list of animatable properties

As was explained in one of your other threads, you are essentially using multiple background images when you combine your gradients with your bg image.

There might be some workaround using opacity but I'm not sure how it would work in your case.

You can however use this other workaround with pseudo ::before and ::after elements to take the place of those linear gradients.

You can run the full code from this...
audio-transition.zip (2.2 KB)

.playButtonb {
  transition:5s;
  position: relative;
  width: 260px;
  height: 260px;
  cursor: pointer;
  border: 3px solid #0059dd;
  background: url("https://i.imgur.com/6wOeaWN.png") 0 0;
}

.playButtonb.active {
  border: 3px solid #e77d19;
  background-position: 0 -260px;
}
    .playButtonb::before,
    .playButtonb::after {
        transition:5s;
        content:"";
        position:absolute;
        top:0;
        left:83px;
        width:3px;
        height:100%;
        background:#0059dd;
    }
    .playButtonb::after { left:174px;}

    .playButtonb.active::before,
    .playButtonb.active::after {
        background:#e77d19;
    }

asasass 2017-12-09 04:50:54 UTC #5

In the downloaded code you provided it included
z-index:1;

I removed it and there was no difference,

Is it needed at all?
https://jsfiddle.net/1qrsd9ks/197/

Ray.H 2017-12-09 05:04:03 UTC #6

Yeah, you grabbed the .zip before I replaced it with an edit.
No, it's not needed in this case.

I reworked the code from this other post and the z-index was needed on it.

asasass 2017-12-09 05:26:23 UTC #7

How would this work

.playButtond::before,
.playButtond::after {

on this code?
https://jsfiddle.net/nkvf38r5/

I removed the linear-gradient from it.

.gradd {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
}

asasass 2017-12-09 05:31:57 UTC #8

I got it, that one requires
z-index:1;
https://jsfiddle.net/nkvf38r5/2/

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index:1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

asasass 2017-12-09 05:36:29 UTC #9

Would these go inside a before and after thing also?

And how would you do that?

.img1::before,
.img2::after {

.img1 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

asasass 2017-12-09 05:43:40 UTC #10

Like this?
https://jsfiddle.net/nkvf38r5/25/

How come this:

.img2::after{
}

Doesn't need:
content: "";

.img1::before,
.img2::after  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

Ray.H 2017-12-09 05:48:55 UTC #11

Nope, that won't work.

To replace the .img1 & .img2 divs with pseudo elements they would become

.playButtond::before

.playButtond::after

Then they would be children of .playButtond just like .img1 & .img2 divs are now

Only group the property names when they are sharing the same styles

asasass 2017-12-09 05:50:09 UTC #12

I did it wrong?

This is set up wrong?

.img1::before,
.img2::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

asasass 2017-12-09 05:53:07 UTC #13

Are you saying not to use before & after on these?

.img1 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.img2 {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

Ray.H 2017-12-09 05:53:41 UTC #14

Try this,

.playButtond::before  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

But you will need to remove the img1 and img2 from the html and css so the pseudos don't duplicate the same thing twice

EDIT: had to put content:""; in :after

asasass 2017-12-09 05:54:53 UTC #15

https://jsfiddle.net/nkvf38r5/28/

.playButtond {
  position: relative;
  border: 3px solid #0059dd;
  width: 260px;
  height: 194px;
  cursor: pointer;
}

.playButtond::before  {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}

.buttond div {
  position: absolute;
  top: 76px;
  left: 111px;
  width: 38px;
  height: 38px;
  background-color: transparent;
  background-size: 14px 18px;
  background-repeat: no-repeat;
  border-radius: 50%;
}

asasass 2017-12-09 06:00:31 UTC #16

I think you meant this:, or no?
https://jsfiddle.net/nkvf38r5/35/

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png");
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/4HJbzEq.png");
  width: 180px;
  height: 180px;
}

asasass 2017-12-09 06:06:20 UTC #17

How would I add this to that code?
These are the 2 lines.

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}

Ray.H 2017-12-09 06:06:50 UTC #18

You can group the shared styles together then override below with the changes

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("https://i.imgur.com/ZmbeHHW.png") no-repeat center;
  border-radius: 50%;
  width: 170px;
  height: 170px;
}

.playButtond::after {
  background: url("https://i.imgur.com/4HJbzEq.png") no-repeat center;
  width: 180px;
  height: 180px;
}

I'm not even sure where your at right now with all those fiddles and code that's being posted

asasass 2017-12-09 06:12:07 UTC #19

Version 1:
https://jsfiddle.net/nkvf38r5/46/

Version 2: Combined
https://jsfiddle.net/nkvf38r5/43/

#17

How do I add the 2 lines in?

.playButtond::before,
.playButtond::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.playButtond::after {
  left: 174px;
}

Ray.H 2017-12-09 06:19:21 UTC #20

You only get one ::before and one ::after pseudo element per html element

Read up on it first so you will know what your working with

To get the two lines in you would need another element to hook new pseudos to

ThemesPodcastArticlesPremium