I want to loop animation, but i have timing porblems. Is it possible to loop animation correct?
Try this:
.red{animation:red 2s 0s infinite alternate}
.orange{animation:orange 2s 1s infinite alternate}
.green{animation:green 2s 2s infinite alternate}
Related
I'm trying to do a simple fade in/out animation in Lua.
I feel like these variables should be enough to solve for the alpha/opacity I want to set the box at every frame, but I'm having a lot of trouble with the fade out, since alpha = targetAlpha * animationPos always returns 0 while multiplying by the target alpha of 0.
All of these variables are decimal values between 0-1, representing alpha or %time completed.
targetAlpha - The alpha value at the end of animation.
initialAlpha - The alpha the box started at when the animation initialized.
animationPos - The current position (%time completed) of the animation
currentAlpha - Current alpha of the box.
Maybe I'm just super fried today, but I've been trying what feels like a billion combinations of these vars to find the equation that works, and to no luck.
Any help is appreciated!
What you want is a linear interpolation, which takes two values a and b, and an interpolation value f between 0 and 1.
function lerp(a, b, f)
return a * (1 - f) + b * f
end
And now you can just interpolate between initial and target alpha using your current animation progress:
alpha = lerp(initialAlpha, targetAlpha, animationPos)
What am I doing wrong to rotate around center
I set transform-origin of each is right in the center of square
Look here pls
https://jsfiddle.net/yqx90or9/1/
group.style.transformOrigin = '100px 100px'
group.style.transform = 'rotate(90deg)'
The problem is this line:
transition: all 1s linear 1s;
When you change the style, you are changing the transform, but you are also changing the transform-origin. So both get animated. The result is your weird behaviour. Change it to:
transition: transform 1s linear 1s;
My application fades between various media and text layers by adjusting their alpha values. However, when using a linear crossfade the brightness appears to "dip" halfway through and then fade back up. After some searching I found this answer that explains the issue, however the suggested solution, fading only one layer at a time, won't work for me since most of the layers I use already contain transparency.
Here's an example of the issue I'm having, in HTML/CSS (code below because SO requires it.
<style>
body, html {
width: 100%;
height: 100%;
margin: 0;
background-color: black;
}
.example {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
#example1 {
background-color: red;
animation: 1s linear 0s fade infinite alternate;
}
#example2 {
background-color: red;
animation: 1s linear 1s fade infinite alternate;
}
#keyframes fade {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
<div id="example1" class="example"></div>
<div id="example2" class="example"></div>
The two divs should fade their opacities back in forth, resulting in a solid red image the entire time. Instead, it appears to dip in brightness.
What is the algorithm or formula for creating a smooth crossfade using alpha? I'm using OpenGL, if that's relevant. (The HTML/CSS snippet was just the easiest way of demonstrating the issue).
Sorry, but it's not possible.
First off, the equation you want is defined here. I'll copy it here in other terms:
outputColor = overAlpha * overColor + (1 - overAlpha) * underColor
If I understand your question correctly, you're looking for a periodic function f(t) for your alpha transition such that:
1 = f(t - 1) + (1 - f(t)) * f(t - 1) = f(t - 1) + f(t) - f(t - 1) * f(t)
The only function that satisfies that equation, at least according to wolfram alpha is the constant 1. And that won't work if you want it to be zero at the beginning, and have it loop infinitely.
Unless you don't want a periodic function, and you just want your fades to look kinda nice. The equation linked above.
There is some good discussion of this topic at this other question.
It's true that there is no perfect solution, other than a step function, but you can mitigate the effects somewhat. The important thing is to have easing functions that cross at a relatively "high" point, rather than at 0.5. See graphs at this answer.
I have a 512*512 matrix which contains calculated probabilities. I am trying to plot the ocuucrences of 0s and 1s of these using a heatmap so that my final image is somewhat like an inverted flattened gaussian function;
the problem is my code returns an image where all values are along the 0 only; this is not possible as I have an almost equal probability of 0s and 1s. Is there some problem with my plotting of the values?
X = reshape(prob_to_1,512,512); % prob_to_1 is the matrix of probabilities which
% is reshaped to a 512*512 matrix
colormap('hot');
imagesc(X);
set(gca, 'XTick', [0:0.05:1]*512, 'XTickLabel',[0:0.05:1]) % 10 ticks
set(gca, 'YTick', [0:0.1:1]*512, 'YTickLabel',[0:0.1:1]*100) % 20
colorbar('YTickLabel',{'100%','90%','80%','70%','60%','50%','40%','30%','20%','10%','0%'})
I have attached an image showing my output. As you can see, the black line which shows the no.of 1s should have been at the extreme right on the x-axes (close to prob of 1).
Any suggestions/ideas?
Thanks!
Well, the second image is a histogram of the same data. hist(X,nbins) is sufficient for plotting it.
I study CSS Animations and I have a question.
This is my example:
http://jsfiddle.net/MBJbB/
Note: Work only in WebKit browsers.
I have 2 keyframes. I set "first" to repeat 3 times.
After running the "first" keyframe of the 3 times, I wanted to call the "second" infinite times.
Edit: joshuanhibbert's answer is more elegant. Use it.
$("#ball").bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function(){
$(this).addClass("infinite");
});
And your CSS
#ball.infinite {
-webkit-animation: second 1s ease-in 0 infinite alternate;
-moz-animation: second 1s ease-in 0 infinite alternate;
-o-animation: second 1s ease-in 0 infinite alternate;
-ms-animation: second 1s ease-in 0 infinite alternate;
animation: second 1s ease-in 0 infinite alternate;
}
JSfiddle: http://jsfiddle.net/K74TW/