Develop Reference

Let the animation at its end state JS/CSS

Here's my problem :
I'm developping a little animation with JS and CSS, and I would like this stop when the animation is over. Now, my animation go back to his basic state.
var
btn = document.getElementById("btn");
anim = document.getElementById("anim");
// button click event
btn.addEventListener("click", ToggleAnimation, false);
// apply all webkit events
anim.addEventListener("webkitAnimationStart", AnimationListener);
anim.addEventListener("webkitAnimationIteration", AnimationListener);
anim.addEventListener("webkitAnimationEnd", AnimationListener);
// and standard events
anim.addEventListener("animationstart", AnimationListener);
anim.addEventListener("animationiteration", AnimationListener);
anim.addEventListener("animationend", AnimationListener);
// handle animation events
function AnimationListener(e) {
if (e.type.toLowerCase().indexOf("animationend") >= 0) {
ToggleAnimation();
}
}
// start/stop animation
function ToggleAnimation(e) {
var on = (anim.className != "");
anim.className = (on ? "" : "enable");
};
#anim
{
display: block;
width: 150px;
height:150px;
background-color: #060;
}
#anim.enable
{
-webkit-animation: flash 1s ease;
animation: flash 1s ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
/* animation */
#-webkit-keyframes flash {
50% { margin-top:50px; }
}
#keyframes flash {
50% { margin-top:50px; }
}
<button id="btn">
Launch animation
</button>
<p><a id="anim" href="#"></a></p>
Here's my FIDDLE. I think the problem is in the function "ToggleAnimation" but I can't find what.
Thanks in advance and had a good day.
Azyme

I think I have achieved what you are trying to - changed the animation to have a start and end state (0% and 100%) and used jquery to add the class "enable" rather than toggle it
css
#-webkit-keyframes flash {
0% { margin-top: 0}
100% { margin-top:50px; }
}
#keyframes flash {
0% { margin-top: 0}
100% { margin-top:50px; }
}
jquery
$('#btn').click(function(){
$('#anim').addClass("enable");
})
hope thats helpful, made a codepen http://codepen.io/anon/pen/vLLKoZ

waitForImages Plugin - not waiting

My jquery/js code is not waiting for images loaded to fade out. What is the problem?
$('#entry').css('background-image','url(../img/backg3.jpg)').waitForImages(function() {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
/*******************
Loading
*********************/
#load {
position:absolute;
height:100vh;
width:100vw;
background-color:#ddd;
z-index:1000;
/*-moz-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
-webkit-transition:all 2s ease-out;
transition:all 2s ease-out;*/
}
#-o-keyframes spin {
100%{
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin {
100%{
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100%{
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin {
100%{
transform: rotate(360deg);
}
}
.spinner {
position:absolute;
top:45vh;
left:45vw;
width:5vh;
height:5vh;
border: 6px solid #F90;
border-left-color:#FC3;
border-bottom-color:#FF6;
border-right-color:transparent;
border-radius:100%;
animation: spin 400ms infinite linear;
margin: auto;
}
<div id="load">
<div class="spinner"></div>
</div>
So I want while my background image is loading to hold the spinner, but it fade outs without image.
Page - http://sarosacramento.com/
Plugin - https://github.com/alexanderdickson/waitForImages

From their github page, it looks like you're supposed to apply .waitForImages() to an element selector (which either has image children or images in its CSS). In your code, instead of applying it to the selector, you're first adding CSS, then trying to apply .waitForImage(), which won't work, since the .css() doesn't return a selector. Try instead:
$('#entry').waitForImages(function () {
$('#load').fadeOut(1000);
$('.spinner').fadeOut(1000);
});
for the JS and just put the background image in normal CSS:
#entry {
background-image: url(../img/backg3.jpg);
}
(If you must set it via JS, do that before applying .waitForImages() to $("entry"):
$('#entry').css('background-image','url(../img/backg3.jpg)');
$('#entry').waitForImages(function () { ...
though I haven't actually tested this.)
Here's an example: http://jsfiddle.net/aq9t6kvk/2/. (It mostly uses your code, but I used some different images that wouldn't be in our caches already. But since the first one might already be loading while JSFiddle is "initializing the awesome", there are some backups for subsequent "Run"s.)

animation Flip div when clicked

I am trying to make the divs flip whenever I click on them. I'm not sure why it doesn't work. Please help.
Here is the demo of this code. http://langbook.co/testicles-1-2-flashcards/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#flip3D{ width:240px; height:200px; margin:10px; float:left; }
#flip3D > #front{
position:absolute;
transform: perspective( 600px ) rotateY( 0deg );
background:#FC0; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
#flip3D > #back{
position:absolute;
transform: perspective( 600px ) rotateY( 180deg );
background: #80BFFF; width:240px; height:200px; border-radius: 7px;
backface-visibility: hidden;
transition: transform .5s linear 0s;}
</style>
<script>
function flip(el){
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";}
var vlib = document.getElementById('front');
vlib.addEventListener(click, flip(el));
</script>
<title>Flashcards</title>
</head>
<body>
<div id="flip3D">
<div id="back">Box - Back</div>
<div id="front">Box - Front </div>
</div>
</body>
</html>

First, I would move your JS to the end of the page.
It also seems like you want to be calling flip() on #flip3D, because you are trying to access it's child elements, like so:
var vlib = document.getElementById('flip3D');
vlib.addEventListener('click', flip(vlib));
To flip back, you could just keep the object's state in an attribute to know which side it's on. Also note that flip(vlib) will be called immediately; to wait for the click event, you'll need to pass a reference to the function:
vlib.addEventListener('click', flip);
Seems to work: JSFiddle

http://www.w3schools.com/css/css3_2dtransforms.asp
http://www.w3schools.com/css/css3_3dtransforms.asp
Not sure if you have tried this but this my solve your problem. Using just CSS you can do the exact same thing (by the sounds of what you are trying to achieve).
Hope this helps.

ex:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility
easy one CSS line :
animation:mymove 3s infinite;
where mymove is:
#keyframes mymove
{
from {transform:rotateY(0deg);}
to {transform:rotateY(360deg);}
}
#-moz-keyframes mymove /* Firefox */
{
from {-moz-transform:rotateY(0deg);}
to {-moz-transform:rotateY(360deg);}
}
#-webkit-keyframes mymove /* Opera, Safari, Chrome */
{
from {-webkit-transform:rotateY(0deg);}
to {-webkit-transform:rotateY(360deg);}
}
#-ms-keyframes mymove /* Internet Explorer */
{
from {-ms-transform:rotateY(0deg);}
to {-ms-transform:rotateY(360deg);}
}
example:
div#myDIV
{
animation:mymove 3s infinite;/* <== HERE */
/* Firefox */
-moz-animation:mymove 3s infinite;
-moz-animation-timing-function:linear;
/* Opera, Safari, Chrome */
-webkit-animation:mymove 3s infinite;
-webkit-animation-timing-function:linear;
}

You had a few mistakes with syntax and declarations in the JS part.
Hope this is what you are looking for:
https://jsfiddle.net/xrtvhvgf/2/
function flip(){
if(vlib_front.style.transform){
el.children[1].style.transform = "";
el.children[0].style.transform = "";
} else {
el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
el.children[0].style.transform = "perspective(600px) rotateY(0deg)";
}
}
var vlib_front = document.getElementById('front');
var el = document.getElementById('flip3D');
el.addEventListener('click', flip);

Click event lost after css animation

For a laugh I have put a Google-esk barrel roll on one of my sites.
All works fine on the first click of the selected element, but it won't fire again after that.
I have tried .click, .on('click', function() {}) and neither work.
Any ideas on how to fix and why this is happening?
Basic jsFiddle here
Source code example;
<html>
<head>
<title>
Roll Me
</title>
<style type="text/css">
</style>
<script>
$(function() {
$('#roll').on('click', function() {
$('body').css({
"-moz-animation-name": "roll",
"-moz-animation-duration": "4s",
"-moz-animation-iteration-count": "1",
"-webkit-animation-name": "roll",
"-webkit-animation-duration": "4s",
"-webkit-animation-iteration-count": "1"
});
});
});
</script>
</head>
<body>
<div id="roll">
<h1>click me</h1>
</div>
</body>
</html>

You need to remove the animation that you applied after it has finished and then re-add it on subsequent clicks.
var $body = $('body');
$('#roll').on('click', function() {
$body.addClass('barrel-roll');
});
$body.on('animationEnd webkitAnimationEnd mozAnimationEnd',function(e) {
$body.removeClass('barrel-roll');
});
#-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
#keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
.barrel-roll {
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count:1;
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="roll">
<h1>click me</h1>
</div>

That's because by that point the body element already has that CSS styling applied. The way to fix it is to remove the style properties from your body element:
setTimeout(function() {
$('body').removeAttr('style');
}, 4000);
I've used setTimeout here to ensure the style attribute gets reset only after your animation has completed (after 4 seconds).
JSFiddle demo.

It isn't the click handler isn't firing. You can verify that with console.log. You need to reset the animation.

After your animation completes, you have already set the animation! The only way to solve this is to remove it again, and then re-trigger it. The best way to do that, however, is CSS classes:
var busy = false;
$('#roll').on('click', function() {
if(busy) return;
else busy = true;
$('body').addClass("do-the-barrel-roll");
setTimeout(function(){
$('body').removeClass("do-the-barrel-roll");
busy = false;
}, 2100);
});
#-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
#keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
body.do-the-barrel-roll {
-webkit-animation: roll 2s;
-moz-animation: roll 2s;
animation: roll 2s;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="roll">
<h1>click me</h1>
</div>
Simple add the class and remove it after the time it takes for the animation to complete. Also, I added a busy to prevent multiple clicks from making this hell.

What is happening is that the css is applied. Since it is already applied then when it is applied again on the next click nothing happens. I have created something that works, adding a class then removing after a timeout that matches the animation length. https://jsfiddle.net/5yqrxvkd/3/
$('#roll').on('click', roll);
function roll(){
$('body').addClass("animate");
setTimeout(function(){
$("body").removeClass("animate");
}, 4000);
}
There may be a better way using animate or something but I'm not that farmiliar with it.

How to trigger css3 rotate effect by clicking?

I have two divs. One is applied the rotate effect and another would trigger by clicking.
$(function() {
$("a").click(function() {
$("#d1").addClass(".spinEffect");
});
});
#d1,
#d2 {
width: 100px;
height: 100px;
background-color: red;
margin: 50px 50px 50px 50px;
}
#d2 {
background-color: green;
-webkit-animation: spin 10s infinite linear;
}
.spinEffect {
-webkit-animation: spin 0.5s 1 linear;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1">
</div>
<div id="d2">
</div>
<a href=#>click me</a>
Here is the demo page. I know the problem should be in js, could someone tell me how to modify it?
It's working when I remove the .
But when I click the link, it only work once. How can I fix that?

You have an error near your addClass, you should put $("#d1").addClass("spinEffect"); and not ".spinEffect", the . is useless there ;)
For your second question, just add infinite in your css
.spinEffect{
-webkit-animation: spin 0.5s infinite linear;
}
EDIT
If you want the box to turn once every time you click on the button you can achieve it with the following method
$(function(){
$("a").click(function(){
var $d1 = $("#d1"); //little optimization because we will use it more than once
$d1.removeClass("spinEffect");
setTimeout(function(){$d1.addClass("spinEffect")},0);
});
});
You may ask why the setTimeout, it's because otherwise, the class is re-added to quickly for the CSS to trigger the effect ;)

all you have do is just remove the '.' from class name in js
JS:
$(function(){
$("a").click(function(){
$("#d1").addClass("spinEffect");
});
});

You can actually do this entirely in CSS and eschew the javascript completely (assuming the target browsers support the :target pseudo-class)
:target selects whichever element has the ID specified by the hash portion of the url, for example: http://localhost/#d1 would be the URL after clicking the link in this answer.
Note I realized that this means the animation would only happen once. So if this was for a situation where the link could be clicked multiple times, definitely go with the JS solution (though I think you'll have to remove the class and add it again to re-trigger the animation)
HTML:
<div id="d1">
</div>
<div id="d2">
</div>
click me
CSS:
#d1, #d2{
width: 100px;
height: 100px;
background-color: red;
margin: 50px 50px 50px 50px;
}
#d2{
background-color: green;
-webkit-animation: spin 10s infinite linear;
}
/* or #d1:target */
:target{
-webkit-animation: spin 0.5s 1 linear;
}
#-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}