Develop Reference

How to remove an infinite animation from a hidden element

The scenario is like this :
two adjacent element
A & B, overlapping elements(A has absolute positioning) both toggle between CSS transform scale(0) to scale(1) i.e when A is shown B is hidden
I have applied an infinite animation on A (SVG opacity changing grom 0.7-1).
When A is hidden, it's animation still seems to be working.
How to fix this without using display: none

You can remove a class with animation for A, and then, if the animation needs to be resumed, return the class with the animation again.

I think the best approach to do this would be setting animation: none or animation: unset when A is hidden. You can set up a watcher, like this one, to watch for A's property changes and then use an if conditional to check if it has reached its "hidden state." Then you can document.getElementById('its id').style.animation = unset
A bonus tip would be using else to set the animation property back to normal once it is "unhidden."

Infinite animation on transformed image

I'm trying to do an infinite animation on a previously scaled image. The problem is that the image goes back to its original size when the animation starts. I'd like to keep the image scaled for its animation.
I've tried to add a class which triggers the animation, or manually from JS (myImage.animate(myKeyframes, myOptions)). Both solutions fail.
Here's how I'm doing this currently:
myImage.style.transform = 'scale(4)'
myImage.addEventListener('transitionend', () => {
myImage.classList.add('animationClass')
})
.myImage.animationClass {
animation: shake 0.2s infinite;
}
#keyframes shake {
/* keyframes stuff */
}
I expect the image to not going back to its original size. I'm trying to keep the state of the scaled image to start the animation.

The easiest fix would probably be to wrap the image in a container and either scale the container and animate the image or the other way around; note that the order of transforms matters.
Otherwise you would probably have to move the scale into the transform of your shake animation to not overwrite it. Transform functions can be combined using spaces, e.g. transform: scale(4) rotate(10deg);.

CSS animation and transition switch

I have a loading bar program that has a circle moving from left to right with a #keyframes animation. That works just fine.
however, I have some JS JQuery that changes a bar below the animating circle.
After the progress bar reaches 100, it tells the CSS to add a class called .tocenter
I know it's actually adding the class becuase when I inspect element, the html has the .tocenter class.
The class makes the circle go to the center (left:50%) as well as turn blue.
The #keyframes animation, however, takes precedence and the transition to the center doesn't show.
I had an "animation-play-state: paused;" added to the .tocenter class, but it doesn't change the left or the background-color elements.
What should i do?

Css3 Transition Blur Flickering edges

I'm trying to add an effect where if you click a button it blurs the background, but the original problem was that the edges where white for some reason, so i pushed them out by using negative margins which worked, but then when i tried to animate the blur and the edges seem to came back then disappear when the animation is done causing a flickering effect?
Jsfiddle: https://jsfiddle.net/xq2ohL4x/
$(function(){
$("#clickme").click(function(){
setTimeout(function(){
$(".image").css("-webkit-filter", "blur(18px)");
},1000);
});
});
Any ideas?
Thanks in advanced :)

See if this works for you. Change your transition to this.
transition: 2s -webkit-filter linear;

animations of multiple widths simultaneously, amounting to 100%

I am trying to adjust the widths of two elements to expand to a wider area when a user closes a left panel.
To do this I animate the left panel to right: 100%, and expand the first element to take over more area while keeping the second element with a fixed width (which also is an animation since now the whole div takes up more space so his percentage needs to change in order for it to take up the same pixel width)
The code is rather long so I won't post much of it here, stack overflow requires something so here's how I do the width animations:
$('#centerWeb').animate({
"width": "81.33333333%"
}, {
duration: 1000,
queue: false
});
JSFiddle: http://jsfiddle.net/dpPG7/
I have several problems, the first, the animation isn't 'smooth', it's fidgety, I've heard or people saying that you can use the same timer queue for queuing animations but I couldn't find how (since I believed that small differences in percentages might cause this).
Any ideas anyone could help with?
My second problem is that sometimes, like in the jsfiddle example, one of the center elements bounces down a row. In my complete web this happens when re-expanding the left area however in the JSfiddle example it happens when minimizing the left area.
In the JSFiddle: The left area when clicked removes it and expands the rest, and the red button when clicked expands the left area back.
My third and final problem, the animation of the left area, when expanding it back, doesn't occur at the same time as the expansion of the first center area (the actionList), it occurs once it's finished, despite being queue:false.

As I commented, I personally prefer this codepen example:
#rightContainer{
-webkit-transition: all linear 300ms;
.. /* browser compatibility & remaining styles */
}
#rightContainer.shrink {
left:20%;
}
and
$("#btn").click(function(){
$("#rightContainer").toggleClass("shrink");
});
Which is imo clean & good practise.