What's a good way to apply a change to animation delay across many set elements?
If so .element1,... .elementXX have all unique timings. Then you want to change all the delays by 5 extra seconds.
I could use a settimeout to apply an animation start class to the element, but is there should be a more efficient solution?
*Edit
For clarification. Existing animation
.element1{animation: fade 1s linear 1s normal;}
.element2{animation: fade 1s linear 2s normal;}
.element3{animation: fade 1s linear 3s normal;}
.
.
.
.elementXX{animation: fade 1s linear XXs normal;}
Considering that all these animation timings and delays are already set, can you set a delay that increases ontop the existing ones. +10secs etc...
Related
I have a CSS keyframes animation that I'm using like so:
.content[docked=true] {
animation: dockContent ease var(--dock-animation-time);
animation-direction: normal;
animation-fill-mode: forwards;
}
.content[docked=false] {
animation: dockContent ease var(--dock-animation-time);
animation-direction: reverse;
animation-fill-mode: backwards;
}
When the docked attribute is set to true, it animates as expected. Afterwards, when the docked attribute is set to false, it doesn't animate and instead snaps to the initial values (0% -- it's running in backwards) as if there were no animation at all. The animation is still being run through though, because I am not setting the CSS rules back to their starting values anywhere except for the animation. After reverting the docked attribute to false, setting it to true again results in the same 'jump' with the expected end values but no transition or value interpolation. Why is this happening?
My animation is too elaborate to use transitions because it sets values in non-linear ways along its duration. That's exactly why I'd prefer not to have to make a second animation with all the values flipped.
I have a CSS-animated background position.
body {
background: linear-gradient(320deg, #000, #3ff);
background-size: 10000% !important;
animation: AnimationName 1s linear infinite;
}
#keyframes AnimationName {
0%{background-position:top left}
50%{background-position:bottom right}
100%{background-position:top left}
}
I have a range slider set up for the user to change the speed, by setting the animation-duration style property. The trouble is, the animation jerks to different parts of the animation as this property is changed. That is, if the animation-duration is 0.1s and it is changed to 5s over the course of a second or so, the background position is seemingly randomly popped around. You can see this for yourself in the fiddle:
https://jsfiddle.net/x97adpe6/2/
I suspect this is happening as the browser is using some sort of time-based calculation to determine where the animation should be for the given animation duration, rather than offsetting the time based on where it is. That is, if the animation duration is changed from a long time, to a short time, and back to a long time, the effect is as if the animation was never changed from the long time.
What I would like to happen is the natural result of changing the speed of something. I don't need any tweening between speeds, but I do want the animation to continue on at the new speed from wherever it is at this moment.
Is this possible, short of re-implementing the whole animation in JavaScript?
I am wondering whether there is already a way through CSS in order to make an element of opacity 0 turns to 1 without any transition time. In other words, I need to make an element which was totally unseen suddenly appears after 4 seconds. No fade-in or out. Just appear with the complete brighteness (opacity).
Use a combination of visibility and opacity:
transition:visibility 0s linear 0.5s,opacity 0.5s linear;
In this demo, hovering over the menu displays only after 0.5s.
http://www.greywyvern.com/?post=337#example5
Simple step-to-end transition:
http://jsfiddle.net/samliew/7EsKK/
this is my css to do animation.
transform: scale(0) rotateY(180deg);
I have to give separate transition-timing-function for scale and rotate. But as per my research, i am able to give like below only, which actually gives same easing function for scale and rotate.
transition: transform .7s ease-in-out;
Any one knows to give separate timing function for scale and rotate.
you can crate multiple animations, the first one would scale and the second would rotate, and assign different easing duration to each of them. multiple animations can then be assigned to a single element.
see this guide http://css-tricks.com/snippets/css/keyframe-animation-syntax/ on how to implement this
quote from the link:
Multiple animations -
You can comma-separate the values to declare multiple animations on a selector.
.animate-this {
animation:
first-animation 2s infinite,
another-animation 1s;
}
I trying to spin an image using CSS keyframes to rotate(360deg). I used keyframe, but every time when animation is complete there is some kind of delay. Also I tried to set 100% { -webkit-transform: rotate(359deg) }, but it didn't work out, I still get that delay. Do you have any idea to prevent it from delaying after every animation?
Here is the link of what I've done so far.
Thanks in advance!
The default value for the animation-timing-function property is ease so your animation slightly accelerate at the beginning and decelerate at the end. This gives you the sense of delay between the loops.
Set the value to linear to have an infinite linear animation:
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
DEMO