What are all the different types of transition effects I could implement on this code which uses an OnClick method?
This is one way:
.playButtonb {
transition: background 5.0s;
This is another way:
.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?
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:
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change...
And this is informative too:
https://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
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.
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
Wouldn’t that apply to the linear-gradient also?
Ray.H
December 9, 2017, 4:31am
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;
}
1 Like
In the downloaded code you provided it included
z-index:1;
I removed it and there was no difference,
Is it needed at all?
Ray.H
December 9, 2017, 5:04am
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.
How would this work
.playButtond::before,
.playButtond::after {
on this code?
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);
}
I got it, that one requires
z-index:1;
.playButtond::before,
.playButtond::after {
content: "";
position: absolute;
z-index:1;
top: 0;
left: 83px;
width: 3px;
height: 100%;
background: #0059dd;
}
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
December 9, 2017, 5:43am
10
Like this?
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
December 9, 2017, 5:48am
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
December 9, 2017, 5:50am
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
December 9, 2017, 5:53am
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
December 9, 2017, 5:53am
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
December 9, 2017, 5:54am
15
.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
December 9, 2017, 6:00am
16
I think you meant this:, or no?
.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
December 9, 2017, 6:06am
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
December 9, 2017, 6:06am
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
December 9, 2017, 6:12am
19
Version 1:
Version 2: Combined
#17
How do I add the 2 lines in?
https://i.imgur.com/yj3Y7Fu.png
.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
December 9, 2017, 6:19am
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
1 Like