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);.
Related
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."
I am trying to create two buttons that will move up when clicked. My problem is that after the animation occurs, the hover animation for the buttons no longer work. From my research I have gathered that it is something to do with animation-fill-mode: forward but I have found no solution that will allow the buttons to animate properly. Here is my relevant code
https://jsfiddle.net/kaizerroll987/j4owy2x7/#&togetherjs=qrfIRBIkon
Forward animations will cause the element to retain the style values from the last keyframe when the animation ends. Simple remove the animation-fill-mode attribute and your hover animation should work.
Im gonna take a random stab. There is a severe lack of info here...
On hover, set animation-name or I guess maybe animation-fill-mode to none.
.elem:hover {
whatever: settings-you-want;
animation-name: none;
}
I just did something similar.
The animation will take priority over hover.
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?
I have a problem where browser is not aware of transform-origin change to dom element or better say it is aware but with delay.
I have a placeholder which i want to scale in on click. I have this piece of code where i calculate clicked element center and apply transform origin to transformed element.
$(".place-holder")
.css({
"-webkit-transform-origin":transCenterY+"px "+transCenterX+"px",
"transform-origin":transCenterY+"px "+transCenterX+"px",
"transform":"scale(2)"
});
What happens is that browser starts to scale to transform-origin: 50% 50% and in the middle of animation it shifts to correct transform-origin position.
If i apply scale 500 milliseconds after applied transform-origin the animation works.
This code works smoothly:
$(".place-holder")
.css({
"-webkit-transform-origin":transCenterY+"px "+transCenterX+"px",
"transform-origin":transCenterY+"px "+transCenterX+"px"
});
setTimeout(function(){
$(".place-holder").css("transform","scale(2)");
}, 500)
Here is the fiddle so you can see what is going on:
https://jsfiddle.net/r9xboa1b/
Click on the red squares - see the shift during transition?
You can only click once and then run fiddle again.
If you apply scale in timeout the shift is gone.
EDIT
What i actually want to achieve is smooth transition to the center of the each square without shifting and without timeout.
https://jsfiddle.net/r9xboa1b/
I resolved the issue.
The trick was, that i applied transition to all transformations on element.
Therefore the change in transform-origin was also transitioning 1s - and that explains the shift in animation.
So changing the
transition:all 1s;
to
transition:transform 1s;
did the trick.
For others that come to this problem - apply transition to only those transform properties you need.
How did they do the effect in the page at http://labs.saurabh-sharma.com/themes/cruz/wp/
I am thinking they put a 0% opacity new image above the existing image and slowly increase the opacity to 100% without changing the opacity of the existing image. (so after 100 "ticks" the new image will cover the old image)
Or is it that the opacity of the new image goes from 0 to 100% WHILE the opacity of the old image goes from 100% to 0 simulataneously?
Or is it something else altogether?
Well the effect looks very good, so I'm trying to build something like it and was wondering how did they do it.
Looks like they are using Nivo Slider (http://nivo.dev7studios.com/).
But yes, the actual animation is the old image fading to 0% opacity, with the new image fading in to 100% opacity at the same time.