I have a CSS transition that uses -webkit-transform: translateX to move a div from the right to the left, its a basic sliding movement (I am guaranteed to only have webkit users in my case).
My problem is that I need to run an action when the animation completes, and up until now I have been using a setTimeout call in javascript to run 1 ms after the animation completes.
It works 99% of the time perfectly, but in rare circumstances, it doesn't go smoothly and it causes problems and I know this is due to the timeout not running exactly at the correct time.
From my research online, I have heard of adding an event listener for webkit transition end but cannot get it working, it works fine on someone else's example online:
jsfiddle.net/jfriend00/5FnwY/
My animation is triggered by javascript, on click of a button, the .move_in class is added to the main div element which then starts the animation. The CSS is below:
.renderZone {
-webkit-animation-timing-function:ease-in-out;
-webkit-animation-duration:805ms;
-moz-animation-timing-function:ease-in-out;
-moz-animation-duration:805ms;
}
.move_in {
-webkit-transform: translateX(0%) !important;
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-0%) !important;
-moz-animation-name: slideouttoleft;
}
.move_out {
-webkit-transform: translateX(-100%) !important;
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%) !important;
-moz-animation-name: slideouttoleft;
}
#-webkit-keyframes slideouttoleft {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(-100%);
}
}
Does anybody have any idea of the best way to approach this, or even a better way of doing what I am doing? I need to keep the CSS animation running the way it is as this provides the best performance on iOS which I have been experimenting a lot with.
Hoping somebody can help!
Thanks!!!
CSS3 has a property called “webkitAnimationEnd” which can be used as an event lister in JavaScript.
Example code:
function cssAnimationEnd() {
//looks for the ID box from the css and fires the event listen when the animation is complete.
box.addEventListener( 'webkitAnimationEnd', function( event) {
alert( "Finished animation!" );
}, false );
}
Related
I'm using animate.css (FadeInDown) on some images and text on page entry.
Runs fines locally, but on server it's not smooth at all because of all the images that need to be loaded (not massive file sizes, just many images).
The problem: animate.css kicks in (on page load), but while the images are half loading. I know I can 'display: none' the images and use JS/LazyLoad to show the images once loaded, but by then animate.css has already triggered.
So I think I need:
A. to delay animate.css until exactly when the images are loaded/displayed
or failing that, B. once you clicked a link to a page, it doesn't proceed to the next page until everything is fully loaded.
Anybody who can help?
animate.css
#keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
In jQuery, you can use $(document).ready() to execute a function when the DOM is loaded and $(window).on("load", handler) to execute a function when all other things are loaded as well, like images.
so basically, you can use this:
$(window).on("load", function(){
// '#yourElement' this is the id of the html element you want to animate.
// you can also use any other selector as well.
$('#yourElement').addClass('animated fadeInDown');
});
If you want to set animation on each image separately, when individual image is loaded you can do it something like this:
$("img").one("load", function() {
$(this).addClass('fadeInDown');
}).each(function() {
if(this.complete) $(this).load();
});
Currently i am running CSS based ken burn effect using opensource code https://codepen.io/anon/pen/VzYRWV
I would like to know how to get the current image which is getting displayed in text box shown in the above demo.
Thanks for your kind help.
Try these CSS effects https://jsfiddle.net/ipsjolly/cugLbrfu/4/
.parent.rotate:hover .child, .parent.rotate:focus .child {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(360deg);
}
.parent.scalein:hover .child, .parent.scalein:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent.scaleout:hover .child, .parent.scaleout:focus .child {
-ms-transform: scale(0.9);
-moz-transform: scale(0.9);
-webkit-transform: scale(0.9);
-o-transform: scale(0.9);
transform: scale(0.9);
}
Created two new scale In and Scale Out
Source
https://css-tricks.com/zooming-background-images/
You can catch css-animations events with javascript function addeventlistener
Ex.
// first image
var img = document.getElementsByClassName('slideshow-image')[0];
// fired on animation start
img.addEventListener("animationstart",function() {
// do stuff here
console.log("Animation start");
},0);
Now, although this works well and how it is supposed to do it, with (not your) example will not work well since the animation is not sequential but all at the same time. (Controls the percentage instead of "steps")
But, you can get the idea and play with it to archive what you're looking for.
Important note: Vendor prefix is still used.
Additional references:
Event reference
animationstart A CSS animation has started.
animationend A CSS animation has completed
animationiteration A CSS animation is repeated.
transitionstart A CSS transition has actually started (fired after any delay).
transitioncancel A CSS transition has been cancelled.
transitionend A CSS transition has completed.
transitionrun A CSS transition has began running (fired before any delay starts).
Detecting CSS Animation Completion with JavaScript
CSS Animation Events
SO tag addeventlistener
SO tag css animations
I am trying to create a simple 'edit mode' feature in an app that I am building.
When the app is in edit mode, the items need to wobble.
I have added a CSS animation to achieve the wobble effect. The animation uses transforms to manipulate the orientation and position.
#keyframes wobble {
0% { transform: translateY(2px) rotate(-2deg);}
25% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(2px) rotate(2deg); }
75% { transform: translateY(0px) rotate(0deg); }
100% { transform: translateY(2px) rotate(-2deg); }
}
Then using jQuery's toggleClass function to trigger the animation.
$('button').on('click', function(){
$('.items').toggleClass('editting');
})
This works fine in Chrome but in Internet Explorer the animation continues to play even after the class is removed.
Strangely, clicking the button 2 extra times will stop the animation in IE.
See jsFiddle here
Has anybody else experienced this before?
It seems that Internet Explorer does not register animation properly when the class name is removed.
As a fix, I have added a not-editting class name to counteract the editting animation.
By adding this feature along with this CSS I am able to get Internet Explorer to behave as expected.
.not-editting .item {
animation: none;
}
See this updated jsFiddle
I discovered the "http://thegoodman.cc/". It's an absolutely amazing website.
I am just really really curious, as to how the body of this document is slightly faded in, and slide up in this page:
http://thegoodman.cc/about/
It's done using CSS animations. When looking at the source, you'll find this line of code:
.sup {
animation:sup 1.8s backwards;
}
#keyframes sup {
0% {
opacity:0;
transform:translateY(50px);
}
30% {
opacity:0;
}
100% {
opacity:1;
transform:translateY(0);
}
}
It'll fade in the text (using opacity) and move it up using translateY .
JSFiddle example.
Take note it's using the Prefix Free JS library to prevent having to add prefixes like -webkit-, -moz- etc.
I am experimenting with WebKits animations.
Is it possible for a HTML element to have more than one animation executing at the same time?
For example:
#-webkit-keyframes FADE
{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes TRICKY
{
0% {
-webkit-transform: translate(0px,0) rotate(-5deg) skew(-15deg,0);
}
50% {
-webkit-transform: translate(-100px,0) rotate(-15deg) skew(-25deg,0);
}
75% {
-webkit-transform: translate(-200px,0) rotate(-5deg) skew(-15deg,0);
}
100% {
-webkit-transform: translate(0px,0) rotate(0) skew(0,0);
}
}
// Can this element have FADE execute for 5 seconds BUT halfway between that animation
// can I then start the TRICKY animation & make it execute for 2.5 seconds?
#myEle {
-Webkit-animation-name: FADE TRICKY;
-Webkit-animation-duration: 5s 2.5s;
}
The above was a really simple example. I would have many libraries of animations such as rotate, fade, etc. And I dont want to have to write a special animation if I want to have an element execute 2 animations at the same time.
Is this possible...
//Not sure if this is even valid CSS: can I merge 2 animations easily like this?
#-webkit-keyframes FADETRICKY
{
FADE TRICKY;
}
#myEle {
-Webkit-animation-name: FADE,TRICKY;
-Webkit-animation-duration: 5s,2.5s;
}
Use ',' no space. I was in Chrome version 16.0.899.0 to try.
You'll have to manually merge the animations, I think.
If you need to use something like this in several places I'd take a look at Less CSS or similar, so that you can use "mixins" (e.g. functions) to generate css. I use it for abstracting vendor specific css so that in the main .less file 5 or 6 lines of browser specific code can be replaced by one method.