How can I stop this animation through JS/Jquery?
.progressLoading::-webkit-progress-value {
box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
border-radius: 10px;
background:
-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
-webkit-linear-gradient(left, #963a2d, #832417);
background-size: 25px 16px, 100% 100%, 100% 100%;
-webkit-animation: move 5s linear 0 infinite;
}
#-webkit-keyframes move {
0% {background-position: 0px 0px, 0 0, 0 0}
100% {background-position: 100px 0px, 0 0, 0 0}
}
I've tried this with no success:
$(".progressLoading::-webkit-progress-value").css({ '-webkit-animation-play-state': 'paused' });
As far as I know, you can't select pseudo elements with jQuery since they don't technically exist in the DOM tree.
One option would be toggle or add a class to the element:
$(".progressLoading").addClass('paused');
$(".progressLoading").toggleClass('paused'); // or toggle it
Then you could use the selector .progressLoading.paused::-webkit-progress-value to select the element and pause the animation via the CSS:
.progressLoading.paused::-webkit-progress-value {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
Related
Below you can see the keyframes. It's a gradient that is supposed to simulate an explosion. When the animation plays it doesn't fade into the next keyframe. It just instantly changes to the next keyframe. I've tried certain transition properties on the regarding class, nothing i've tried seems to work. I have tried some animation properties as well. They don't work either.
#keyframes Explosion {
0% {
}
20% {
background-image: radial-gradient(
rgba(255, 255, 255, 1) 10%,
rgba(246, 237, 0, 0) 20%,
rgba(250, 0, 0, 0) 60%
);
transform: scale(2);
}
40% {
background-image: radial-gradient(
rgba(255, 255, 255, 1) 10%,
rgba(246, 237, 0, 1) 20%,
rgba(250, 0, 0, 0.3) 60%
);
transform: scale(2);
}
60% {
background-image: radial-gradient(
rgba(255, 255, 255, 1) 10%,
rgba(246, 237, 0, 1) 20%,
rgba(250, 0, 0, 1) 60%
);
transform: scale(2);
}
100% {
background-image: radial-gradient(
rgba(255, 255, 255, 1) 60%,
rgba(246, 237, 0, 1) 65%,
rgba(250, 0, 0, 1) 70%
);
transform: scale(2.3);
}
}
background-image is animatable but only discretely. So while you cannot smoothly animate between background images what you can do in your case is use opacity on before and after pseudo elements to fade out one background image while the next one fades in.
In this snippet the scaling remains with the element, the backgrounds come and go on the pseudo elements.
.container {
background-color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.explosion {
width: 50vmin;
height: 50vmin;
position: relative;
animation: Explosion 5s linear infinite;
}
.explosion::before,
.explosion::after {
content: '';
animation: var(--animation) 5s linear infinite;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.explosion::before {
--animation: Explosionb;
}
.explosion::after {
--animation: Explosiona;
}
#keyframes Explosion {
0% {}
20%,
40%,
60% {
transform: scale(2);
}
100% {
transform: scale(2.3);
}
}
#keyframes Explosionb {
0% {
opacity: 0;
}
20% {
background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 0) 20%, rgba(250, 0, 0, 0) 60%);
opacity: 1;
}
40% {
opacity: 0;
}
41% {
background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 1) 20%, rgba(250, 0, 0, 1) 60%);
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes Explosiona {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
21% {
background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 1) 20%, rgba(250, 0, 0, 0.3) 60%);
opacity: 0;
}
40% {
opacity: 1;
}
60% {
opacity: 0;
}
61% {
background-image: radial-gradient( rgba(255, 255, 255, 1) 60%, rgba(246, 237, 0, 1) 65%, rgba(250, 0, 0, 1) 70%);
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="container">
<div class="explosion"></div>
</div>
Obviously you will want to alter the elements' dimensions to suit your particular case.
This question already has answers here:
CSS transform doesn't work on inline elements
(2 answers)
Only transition a transform in css?
(4 answers)
Closed 1 year ago.
I have the following code:
z {
color: #0563bb;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2),
}
<p>Hi there <z>This is the text that needs the hover animation</z>
Why doesn't the animation seem to work? Is it because its text or am I doing something wrong?
The problem there is you are using transform but not transition. This way the text jumps to the next state without an animation. This should fix your problem:
z {
color: #0563bb;
display:inline-block;
trasform: translate(0, 0);
transition: all 0.8s linear;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px 32px 25px -8px rgba(0, 0, 0, .2);
transition: all 0.8s linear;
}
<p>Hi there <z>This is the text that needs the hover animation</z></p>
You should also remove the comas from the box-shadow value.
It just needs a block-style display, as in display:inline-block;
Additionally, I added a transition on the element for a little animation.
Note: Your box-shadow values were not valid. I corrected them, but take a look at this: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
Thanks #evolutionxbox for the guidance and extra set of eyes
z {
color: #0563bb;
display:inline-block;
transition: transform .3s;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px 32px 25px 8px rgba(0, 0, 0, .2);
}
<p>Hi there <z>This is the text that needs the hover animation</z></p>
Your box-shadow property value is invalid. Remove the commas:
z {
color: #0563bb;
display:inline-block;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px 32px 25px -8px rgba(0, 0, 0) /* percentage removed for demonstration */
}
<p>Hi there <z>This is the text that needs the hover animation</z>
If you want to make the changes "animate", simply specify a transition duration:
z {
color: #0563bb;
display:inline-block;
transition:0.5s;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px 32px 25px -8px rgba(0, 0, 0) /* percentage removed for demonstration */
}
<p>Hi there <z>This is the text that needs the hover animation</z>
There is no Element have name <z> in HTML, You Should not Put , in the last Line so The right Code in HTML mey be Lik eThis:
<p>Hi there <div class="z">This is the text that needs the hover animation</div></p>
and CSS Like This :
.z {
color: red;
display: inline-block;
}
.z:hover {
transform: translate(0, -7px);
box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2);
}
Or You should add Closing Tag For p Tag and Remove , in CSS Code and Replace it with ;.
So Your Code Mey Be Like This:
<p>Hi there <z>This is the text that needs the hover animation<z></p>
and CSS Like This:
z {
color: red;
display: inline-block;
}
z:hover {
transform: translate(0, -7px);
box-shadow: 0px, 32px, 25px, -8px rgba(0, 0, 0, .2);
}
Hi I have a problem with my code. I want the text to be centered at all devices. But it seems like its going to the right side of the box? Example, try to make the window smaller, you will see the text going to right side instead of being centered all the time.
What am I doing wrong?
#box1 {
background-color: rgba(55,190,239,0.6);
color: #FFFFFF;
padding: 105px;
text-align: center;
font-size: 3.1vh;
font-weight: bold;
/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#box1:hover {
background-color: rgba(55,190,239,0.9);
}
<div id="box1">FASTIGHETER</div>
Fiddle: https://jsfiddle.net/fg7xe9s9/
You need quit padding-left and right: fiddle
#box1 {
background-color: rgba(55,190,239,0.6);
color: #FFFFFF;
padding-top: 105px;
padding-bottom: 105px;
text-align: center;
font-size: 3.1vh;
font-weight: bold;
/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
#box1:hover {
background-color: rgba(55,190,239,0.9);
}
.button1{
background: #E68A00 url(wooden.jpg) repeat-x;
border: 2px solid #eee;
height: 28px;
width: 115px;
margin: 50px 0 0 50px;
padding: 0 0 0 7px;
overflow: hidden;
display: block;
text-decoration:none;
font-family: 'Sacramento', cursive;
color : white;
font-size: 30px;
/*Rounded Corners*/
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/*Gradient*/
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
/*Transition*/
-webkit-transition: All 0.5s ease;
-moz-transition: All 0.5s ease;
-o-transition: All 0.5s ease;
-ms-transition: All 0.5s ease;
transition: All 0.5s ease;
}
pg.button1{
position:absolute;
right:0px;
top:100px;
}
pg:hover {
width: 200px;
}
<pg <a class = "button1" href="http://www.google.com">Small $14 </a> </pg>## Heading ##
The above tag was a link until i introduced the tag pg which is meant to position the link on the screen. The reason is that i still want to use the class with other objects ! so i don't have to duplicate my code! i have created tags like p1 p2 p3 p4 to use with that same class
It actually positions it but its no longer a link ! Why is that ? and how do i get this working again ?
Rather than invent new tags, just use multiple classes. In this case, depending on what you're actually trying to do, you can do this:
<a class="button1 pg" href="...">Small $14</a>
Or this:
<div class="pg"><a class="button1" href="...">Small $14</a></div>
Hey guys Iam trying 2 use light box at the moment and every thing is working fine. However what iam trying 2 figure out is how do i get a border like http://lokeshdhakar.com/projects/lightbox2/ the ones which they got in the examples to change colour. Any help on this would be great.
html:
<div class = "image1">
<img src="images/image1t.jpg" />
</div>
Try the below code
.image1 a {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);
display: block;
float: left;
line-height: 1em;
margin-right: 40px;
padding: 7px;
transition: all 0.2s ease-out 0s;
}
.image1 a:hover {
background-color: #8AD459;
}
Set a css3 transition property on your anchors, then on :hover property, the effects will "animate".
.image1 a {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.image1 a:hover {
background-color: #8ad459;
-webkit-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
box-shadow: 0 -1px 0 0 rgba(255, 255, 255, 0.2), 0 1px 4px 0 rgba(0, 0, 0, 0.5);
}