Using Javascript to Start CSS Animation at Certain Percent - javascript

Let's say I have a simple and linear CSS animation like this
#keyframes move {
0% {top: 0;}
100% {top: -10000px;}
}
Which loops infinitly, and uses 10 steps:
.move {
animation: move 1s steps(10, end) infinite;
animation-play-state: running;
}
And it has a second animation which makes it go for 60 seconds
.sixty_seconds {animation-duration: 60s;}
How can I use javascript to start the animation halfway through its iteration? Is there a way to start a specific animation at a specific percent through its iteration? I need this starting point to be programmable, as it could start at 30% one time, or 77.32% the next.
I'm sure the answer is right under my nose, but I can't seem to find anything that gets it to use these existing animations starting at a specific point.
Thank you very much.

Related

CSS animation rendering inconsistently on iOS

I'm trying to make a div repeatedly appear instantly and slowly fade-out, at arbitrary intervals.
JS used to make the div appear:
div.classList.remove('fade-out');
div.offsetWidth;
div.classList.add('fade-out');
With this CSS:
.fade-out {
animation: fadeOut 2.5s ease-out;
}
#keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
div { opacity: 0; }
For some reason, this works as expected in desktop Chrome, Safari & Firefox, but on iOS around half of the time the animation isn't played — the div just disappears after 2.5 seconds with no progressive opacity change. This happens both on both iPhone and iPad, with both Firefox and Safari.
Stuff tried since the initial post:
Add animation: none to the element's original definition.
Set the animation property through JS instead.
Use 100% and 0% instead of to and from.
Setting the div's initial opacity to 1 instead of 0 and add animation-fill-mode: forward.
Add a short delay with setTimeOut.
Use full animation definition instead of shorthand notation.
Additional definition using -webkit-animation and #-webkit-keyframes.
Using any of the above doesn't have an effect on the animation, which still works as expected everyhere except on iOS.
(Not a real) solution
The only way I could make iOS display the animation consistently was by adding a short delay to the animation:
animation: fadeOut 2.5s ease-out 0.01s
However, since the div's "instant display then fade-out" animation can be triggered while an old animation is still running on it, the delay adds a noticeable one-frame flash which is undesirable (regardless of how low I set the delay value).
Any ideas?

Javascript-JQuery When

Guys I am making a menu bar but I have been stuck in animating or moving it. These are my reletant codes:
function navbar(){
document.getElementById("a").style.marginLeft = "50%";
.
.
.
function navbar2(){
document.getElementById("a").style.marginTop = "-100px";
}
$(document).ready(function(){
$("#a").click(function(){
navbar();
var x = $('#a');
$.when(x.css("margin-left")=="50%").done(function(){
navbar2();
});
});
});
I want my navbar icon to first move margin-left = 50%; and after this when my icon reaches margin-left 50%, move icon to top. But now when I click on icon it starts to go top and right at same time. But I want my icon to first go right then go top.
Can someone please help?
You can do it like this with jQuery, without requiring navbar() and navbar2() :
$("#a").click(function() {
$(this).animate({
margin-left: "50%"
}, "slow")
.animate({
margin-top: "-100px"
}, "slow");
});
jQuery can do animations but CSS can do them better with CSS Keyframes. This is because of CSS being much more performant and can use low-level systems (talk directly to the browser) to do your animations.
Start off by creating a CSS class which has an animation property. With this property you can tell the browser what the animation should be, how long it should take, if it has a delay, and many more options.
Now it's time to create your animation with the #keyframes keyword. After the keyword you specify the name of the animation. Inside the #keyframes block you continue with the steps of the animation. In the example below I've used 0%, 50% and 100% as the steps, or keyframes, of the animation. These numbers indicate the start (0%), the halfway point (50%) and the end (100%).
Within the blocks of the keyframes you specify what you want the style to be at that specific point. So you could say that at the start you don't want any margin, but at 50% you want the margin to be -50% to the left. Then at 100% you want the margin to be both -50% to the left and -100px to the top.
/**
* Define a class with an animation property.
* This specific class uses the navbar-animation animation which
* completes in 3 seconds without delay. It also has a linear easing
* and only runs once. The fill-mode specifies if the last keyframe
* of the animation should persist if the animation is finished.
* Otherwise your element would shoot back to its starting position.
*/
.animation {
animation-name: navbar-animation;
animation-duration: 3s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: 1
animation-fill-mode: forwards;
/* Or in shorthand */
animation: navbar-animation 3s 0s linear 1 forwards;
}
#keyframes navbar-animation {
0% {
/**
* This is the starting position of the animation.
* without any margins.
*/
margin: 0;
}
50% {
/**
* At the halfway point the element should be 50% to
* to the left.
*/
margin: 0 0 0 -50%;
}
100% {
/**
* At the end the animation has to be 50% to the left
* and 100px up.
*/
margin: 0 -100px 0 -50%;
}
}
Because you now have your animation specified in CSS, you don't have to worry anymore about it in your JavaScript, which makes your JS much less complex.
All you have to do now is to add the CSS class you specified above here and add it whenever you've clicked the element that should trigger the animation.
$(document).ready(function() {
// Select the element and store it in a variable so
// you don't have to select it again.
var $a = $('#a');
// Only add a CSS class to the element and let CSS
// handle the animation.
function addAnimation() {
$a.addClass('animation')
}
// Listen for click to call the addAnimation function.
$a.on('click', addAnimation);
});
That should do it to create the animation you want. As a side note I want to add that I encourage you to use the transform property instead of margin to move your elements. transform is meant for this kind of operation without breaking the flow of the document and keeping performance high.

Car driving forward animation using JavaScript/CSS3 for banner advertisement

Is there a way to use JavaScript or CSS3 to animate an image of a car driving towards a user? To clarify, the car image should animate from the background, with the image smaller and seemingly further away and gradually get larger as it "drives" forward to the foreground of the image? The image will be of the front part of the car and will look like this:
This JavaScript animation will be utilized in an HTML5 banner advertisement so I am hoping to avoid anything that will increase the size of my deliverable substantially. I have been looking online for something similar to this and can't seem to find an example of what I am hoping to accomplish. Any ideas are welcome.
You don't need javascript, you can just use a CSS3 animation. For example, this would work:
#keyframes drive {
from {
transform: scale(0.2);
}
to {
transform: scale(1);
}
}
.car {
animation: drive 3s cubic-bezier(0.02, 0.01, 0.21, 1) infinite;
}
<img class="car" src="https://i.stack.imgur.com/oT3DY.png"/>
Explanation:
First, we define a drive animation. It starts with a CSS3 transform that scales the image to 1/5th the size, then at the end of the animation, to full size. You can use any css property, even width but transform: scale doesn't force a page render, so your animation is faster.
Then, let's break down the animation property on the .car.
drive - this part is self-explanitory, it tells CSS to use the drive key frames
3s - makes the animation last 3 seconds
cubic-bezier(0.02, 0.01, 0.21, 1) - sets the curve for the animation to run, so it scales slower the further along it goes.
infinite causes the animation to repeat infinitely.
This should get you started:
img {
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation:mymove 3s infinite;
position: relative;
}
#keyframes mymove
{
0% {width:10%;}
10% {width:20%;}
20% {width:30%;}
30% {width:40%;}
40% {width:50%;}
50% {width:60%;}
60% {width:70%;}
70% {width:80%;}
80% {width:90%;}
90% {width:100%;}
100% {width:100%;}
}
<img src="https://i.stack.imgur.com/oT3DY.png">

How to scroll a div, pause & restart in javascript

How can I make a simple javascript animation to scroll a div (#MyDiv) from say 300px to - 300px over 15 seconds, pause for 15 seconds, then replay, and keep doing this on an endless loop?
I tried with css using multiple methods but its just not smooth enough for my needs.
My experience is that CSS3 animations are almost always more smooth than animations done by Javascript libraries.
Here's a way to do it without any Javascript, with CSS3 animations:
#scrollingContent
{
animation: scroll 30s linear 0s infinite normal;
-webkit-animation: scroll 30s linear 0s infinite normal;
}
#keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
#-webkit-keyframes scroll
{
0% { top: 300px; }
50% { top: -300px; }
100% { top: -300px; }
}
Working demo: http://jsfiddle.net/nj9yfk7b/
And here's an alternative way to do it with native Javascript and CSS3 transitions:
Working demo and code: http://jsfiddle.net/yfk7330j/
In this case, the transitions are triggered by Javascript by setting and un-setting a certain class name on the element that should be scrolling.
The transition version allows for better control with Javascript, while the animation version just does it's looping thing infinitely.
I tried to keep the code clean as possible, but please let me know if it needs any clarification.
Maybe the functions ScrollBy and SetInterval can help you:
http://www.w3schools.com/jsref/met_win_scrollby.asp
http://www.w3schools.com/jsref/met_win_setinterval.asp
You can use the intervals to jump every x ms y pixels, and then wait 15 seconds after you have reached an amount of pixels.
Also, I've seen this JQuery plugin, maybe it can also help (though I haven't researched it properly though):
Scrolld.js
Rememberer that people here won't write the code for you, but will happily help you pass through specific problems.

CSS Keyframe Movements with Delays

I'm stumped with this animation. I have an element that I'm creating a path for movement (not including vendor prefixes in sample):
keyframes Path_1{
0% {left:54%;top:66%;}
50% {left:54%;top:68%;}
100% {left:54%;top:66%;}
}
This creates a simple path movement.
Paths are supplied to some JS like so:
"path" : "54,66||54,68"
The JS loops through all coordinates passed in and automatically generates a path movement keyframe. It also handles adding the last coordinate pair to loop the animation.
I'm wondering if there is any way to supply specific speeds / delays to each point?
keyframes Path_1{
0% {left:54%;top:66%;} <- 1s
50% {left:54%;top:68%;} <- 5s
100% {left:54%;top:66%;} <- 10s
}
Thanks!
You can't provide delays as extra parameters in the keyframe declaration. You basically get percentages within which you define which properties animate from what, to what during the fragment of animation overall time that the percentage defines.
However, there are ways of doing this. I've created a jsfiddle here
.animation {
width: 100px;
height: 50px;
background-color: #f00;
animation: demo 5s ease-in infinite;
}
#keyframes demo {
0% {
width: 100px;
}
50% {
width: 400px;
}
90% {
width: 400px;
}
100% {
width: 100px;
}
}
We can see that the animation is programmed to last 5s, but at one point a delay is achieved by keeping the animated properties static for n%. At 50%, the animation sticks at 400px and stays that way until 90% and the effect is a 2s pause. 40% of 5s = 2s.
Speed is also possible by adjusting the percentage and the overall time. The first section of the animation is slower than the second because the time spent to cover the same distance is just 10% of the overall time rather than 50%.
As usual, CSS Tricks does a great run through of what's available.
Now you just need to define this data in your json and interpret it in your javascript to build the correct keyframe anims, have fun with that!

Categories