I'm using CSS3 Animations, and I want to be able to move to a specific spot in the animation. For instance, if the CSS looks like this (and pretend that I used all the proper prefixes):
#keyframes fade_in_out_anim {
0% { opacity: 0; }
25% { opacity: 1; }
75% { opacity: 1; }
100% { opacity: 0; }
}
#fade_in_out {
animation: fade_in_out_anim 5s;
}
then I would like to be able to stop the animation, and move it to the 50% mark. I guess that the ideal JavaScript would look something like this:
var style = document.getElementById('fade_in_out').style;
style.animationPlayState = 'paused';
// Here comes the made up part...
style.animation.moveTo('50%'); // Or alternately...
style.animationPlayPosition = '50%';
Does anyone know of a way to make this happen (hopefully in Webkit)?
We can use the animation-delay property. Usually it delays animation for some time, and, if you set animation-delay: 2s;, animation will start two seconds after you applied the animation to the element. But, you also can use it to force it to start playing animation with a specific time-shift by using a negative value:
.element-animation{
animation: animationFrames ease 4s;
animation-delay: -2s;
}
http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/
Related
I am using transition: opacity 5s; property. I want to show different alert or console message when my opacity value is 0.4 or 0.6 or .2 . on button click I am doing transition but I want to know opacity progress so that i will show those message ?
is there any way to do this
var btn = document.querySelector("button");
var par = document.querySelector("#parId");
btn.addEventListener("click", (e) => {
par.classList.add("removed");
});
par.addEventListener("transitionend", () => {
par.remove();
});
#parId {
transition: opacity 5s;
}
.removed {
opacity: 0;
}
we are getting transitionend callback if there any progress callback where I will check opacity value ?
There is no event that can be listened to to give what you want - unless you are going to use a linear transition. In that case you can carve your changes of opacity up into 0.2s slots, changing opacity on transitionend to the next value down - 0.8, 0.6 etc.
Your code however takes the default for the transition-timing-function property which is ease - not linear - so transitionend is of no use to you.
This snippet polls the opacity changes every tenth of a second and writes the current opacity to the console so you can see what is happening.
A couple of points: you will have to check for when the opacity goes just less than one of your break points, you are unlikely every to hit it just at exactly 0.6s or whatever; also notice that the console carries on being written to after the element has totally disappeared. The timing will not be exact, things are happening asynchronously.
<style>
#parId {
transition: opacity 5s;
width: 50vw;
height: 50vh;
background: blue;
opacity: 1;
display: inline-block;
}
.removed {
opacity: 0;
}
</style>
<div id="parId"></div>
<button>Click me</div>
<script>
var btn = document.querySelector("button");
var par = document.querySelector("#parId");
btn.addEventListener("click", (e) => {
let interval = setInterval(function () {
const opacity = window.getComputedStyle(par).opacity
console.log(opacity);
if (opacity == 0) {clearInterval(interval);}
}, 100);
par.style.opacity = 0;
});
</script>
You could potentially check periodically like this, although your interval will need to be at least the speed of the opacity animation or be quicker than it to catch the values.
var par = document.querySelector("#parId");
setInterval(function() {
console.log(window.getComputedStyle(par).opacity);
}, 100)
#parId{
opacity: 0.2;
transition: opacity 3s ease-in-out;
}
#parId:hover {
opacity: 1;
}
<div id="parId">
test
</div>
Take a look in this example
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event
You could define your animation stages as diferent ranimations on css then call them in chain via javascript. Before, you must set an event listener for the animationend event, and every time the event is fired you check the #parId opacity.
You could do it.with jQuery to, totaly in javascript
I want change the opacity of text periodically after some interval. The opacity should changed from 30% to 100% in a loop after some time interval.
I have used:
$("#mydiv").animate({opacity:1.0},2000);
but cant get it in loop.
You can use css opacity animation for the div and then add this code
.myID{
animation-iteration-count: infinite;
}
You can acheive this by css:
#mydiv {
animation-name: periodicfading;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 0s;
}
#keyframes periodicfading {
0% {
opacity: 0.3;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.3;
}
}
This should give you an idea of how to change opacity over time using setInterval.
I leave it to you to continue the "loop" instead of ending it when we reach 100%. (As a hint, you can write a similar function called "lighten" and use a boolean called "gettingDarker" to help decide which function to call.)
const myDiv = document.getElementById("myDiv"); // Gets a reference to the div
let opacity = 0.3; // Initializes the JavaScript variable
myDiv.style.opacity = opacity; // Initializes the div's opacity
// Calls `darken` every 500ms
// (Identifies `ticker` so we could later pass it to `clearInterval`)
const ticker = setInterval(darken, 500);
function darken(){
console.log(opacity);
if(opacity < 1){
opacity += 0.1; // Increases the value
myDiv.style.opacity = opacity; // Applies the new value to the div
}
else{ // Already 100% opaque, so stop calling the function
clearInterval(ticker);
}
}
<div id="myDiv">Text that gets darker</div>
I have a problem with looped fade-in/fade-out image source changing in JS and CSS and using SetTimeout() callback.
The problem is, that the sequence is working strange: sometimes the image changes before the transition starts, sometimes it works fine, and sometimes in the other way.
Here is my JS:
const animationTime = 5000;
const transitionTime = 500;
function nextImage() {
let img = document.getElementById('img1');
img.classList.remove('hidden');
setTimeout(function () {
img.classList.add('hidden');
},animationTime-transitionTime);
img.src=randomize();
setTimeout(nextImage, animationTime);
}
randomize() function just gets a random image path from array.
Here is HTML:
<div class="some-class">
<img class="some-image" id="img1" src="1.png">
</div>
And here is CSS:
.some-image {
transition: opacity 0.5s linear;
-webkit-transition: opacity 0.5s linear;
-o-transition: opacity 0.5s linear;
-moz-transition: opacity 0.5s linear;
-moz-border-radius: 15px;
}
.hidden {
opacity: 0;
}
Upd.
So I have edited CSS file:
.some-image {
width: 370px;
height: 190px;
animation: fade-out;
animation-duration: 1s;
}
.hidden {
animation: fade-out;
animation-duration: 1s;
}
#keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
#keyframes fade-out {
from {opacity: 1}
to {opacity: 0}
}
And JS-file:
function nextImage() {
let img = document.getElementById('img1');
img.classList.remove('hidden');
setTimeout(function () {
img.classList.add('hidden');
},animationTime-1000);
img.src=randomize();
}
setTimeout(nextImage, animationTime);
}
And, somehow, it works perfectly on a local machine, but on a dedicated website animation sometimes fades-in before the image source changed.
I think the problem is about timing. The setTimeout function didn't guarantee to execute exactly time as argument set. So there is a possibility that you change the src of image before/after it add/remove hidden class. These delay is rarely happens that might be the reason why it works on your machine.
So this problem can solve by every time you change the image you must have to make sure the image is completely hide.
const nextImage = function () {
let img = document.querySelector('img')
img.classList.add('hidden')
setTimeout(() => {
img.style.visibility = 'hidden'
img.src = randomImage()
// skip to next frame, may be this not necessary to use setTimeout
setTimeout(() => {
img.style.visibility = ''
img.classList.remove('hidden')
}, 10)
}, animationDuration)
setTimeout(nextImage, intervalDuration + animationDuration)
}
The new cycle will be: fade image out, wait for animation then change image (with set visibility to hidden) and then fade in. And loop.
With this approach. If setTimeout is early execute before the image has completely fade out the visibility will be set hidden. If it's delayed, the image will be hide a bit longer.
Live example here. In that code I add a little bit noise with random time to test.
Unfortunately, After I spent an hour to see my answer is right I still feel it's not perfect anyway and it will be worse if you image is large. I would recommend you try two or more img tags instead.
You should try using css animations instead. You can easily implement the above with it, and it will save you the trouble of handling animations in your code.
I'm trying to get a div to move from one end of the screen to the other on a loop.
My javascript currently only attempts to move the div left but doesn't work.
var func = function() {
$("#bob").animate({"left": "-40px"}, 1000, function() {
$(this).animate({"left": "40px"}, 1000)
})
setTimeout(func, 2000);
}
Here is my jsfiddle:
http://jsfiddle.net/zsal/N48Eg/1/
Name your functions, and then use one as the completion callback in the other:
function goLeft() {
$('#bob').animate({'left': '-40px'}, 1000, goRight);
}
function goRight() {
$('#bob').animate({'left': '40px'}, 1000, goLeft);
}
goLeft();
So, when it's done going left, it should go right. When it's done going right, it should go left.
Disclaimer: Untested
P.S. You're missing jQuery in your Fiddle.
Your current fiddle doesn't work because you didn't include jQuery (from the Frameworks & Extensions drop-down on the left) and because you define the func() function but never actually call it. Fix those two things and it will work as shown here: http://jsfiddle.net/N48Eg/8/
Note, however, that your animation code is more complicated than it needs to be. Multiple animations on the same element will be queued automatically by jQuery, so you don't need to use a callback on the first one to start the second. And you can supply func as the callback on the second and avoid the setTimeout() completely:
var func = function() {
$("#bob").animate({"left": "-40px"}, 1000)
.animate({"left": "40px"}, 1000, func);
}
func();
Demo: http://jsfiddle.net/N48Eg/18/
You just haven't called your function...
var func = function() {
$("#bob").animate({"left": "-40px"}, 1000, function() {
$(this).animate({"left": "40px"}, 1000)
})
setTimeout(func, 2000); // added back
}
func();
Your updated fiddle
First of, if you want the motion to continue, you need to use setInterval instead of setTimeout
Also you need to either move the setInterval out of the scope of func, or call func to start the animation
lots of problems. Heres a fiddle with a solution.
you also forgot to position:relative your absolutely positioned elements container.
JSFIDDLE
you weren't calling your function for starters
i made a new one called moveBob()
Here's the pure CSS version. http://jsfiddle.net/zDSRd/
#bob
{
position:absolute;
animation: fly 2s linear 0s alternate infinite;
-webkit-animation: fly 2s linear 0s alternate infinite;
-moz-animation: fly 2s linear 0s alternate infinite;
-o-animation: fly 2s linear 0s alternate infinite;
-ms-animation: fly 2s linear 0s alternate infinite;
}
#keyframes fly {
from { transform: translateX(0px); }
to { transform: translateX(500px); }
}
#-webkit-keyframes fly {
from { -webkit-transform: translateX(0px); }
to { -webkit-transform: translateX(500px); }
}
#-moz-keyframes fly {
from { -moz-transform: translateX(0px); }
to { -moz-transform: translateX(500px); }
}
#-o-keyframes fly {
from { -o-transform: translateX(0px); }
to { -o-transform: translateX(500px); }
}
#-ms-keyframes fly {
from { -ms-transform: translateX(0px); }
to { -ms-transform: translateX(500px); }
}
Each time a css3 animation loops I'd like to change a variable in the style.
For example the following css drops a group of parachutes from the top to the bottom of the screen:
#-webkit-keyframes fall {
0% { top: -300px; opacity: 100; }
50% { opacity: 100; }
100% { top: 760px; opacity: 0; }
}
#parachute_wrap {
-webkit-animation-name: fall;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 70s;
-webkit-animation-timing-function: linear;
}
Ideally however, at the end of each loop I'd like to throw in a random X position.
The default style of the group is:
#parachute_wrap {
position: absolute;
top: -300px;
left: 50%;
margin-left: 140px;
}
So after 70 seconds, I would like to change the margin-left or left attribute anywhere between -200px and 200px.
I understand I could do something like this with jquery and everytime():
$('#parachute_wrap').everyTime ( 70000, function (){
$("#parachute_wrap").css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});
But is there a way to tie the css loop to js to do this? i.e. is there a return call of any kind which js can listen to for perfect syncing with the animation? I fear that if I use JS on a 70s timer whats going to happen is the timing is going to not sync right, and half way through the css animation the js will do its timed loop and the parachutes are going to jump around the place half way through the animation.
How would you approach this?
CSS3 animations have an animationEnd event fired when the animation completes.
You can bind that event to your animated element thus triggering that left change at the end of each animation:
$('#parachute_wrap').on('webkitAnimationEnd mozAnimationEnd msAnimationEnd oAnimationEnd animationEnd', function(e) {
$(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});
This way, you know exactly when the animation ends and the left change is applied correctly.
There is also an animationiteration event fired at the start of every new animation iteration, i.e. every iteration except the first.
$('#parachute_wrap').on('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(e) {
$(this).css({left: Math.floor(Math.random() * 51) + 5 + '%'},0);
});
http://www.w3.org/TR/css3-animations/#animationiteration