Develop Reference

How to apply a new transform animation while other one is running on the same element

I have a basic fixed animation on an element that runs when the user click on "space" :
&.pop {
animation: pop 1s ease-in 20ms 1 normal both;
}
#keyframes pop {
0% {
transform: rotate(0deg);
transform-origin: 30px;
}
20% {
transform: rotate(-30deg);
transform-origin: 30px;
}
40% {
transform: rotate(-10deg) translate(-2px, -20px);
transform-origin: 30px;
}
60% {
transform: rotate(0deg) translate(0, -40px);
transform-origin: 30px;
}
80% {
transform: rotate(3deg) translate(2px, -20px);
transform-origin: 30px;
}
100% {
transform:translate(0,0);
transform-origin: 30px;
}
}
Now, i want to add different other transform animations onkeydown that will run simultaneously with the current animation, for example :
&.spin {
animation: spin 500ms ease-out 20ms 1 forwards;
}
#keyframes spin {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(180deg);
}
}
So my problam is that when i am adding the second "spin" class, it runs over my first "pop" animation.
what will be the way to add it instead of running over ?

if i understood your question correctly:
you can use multiple animations within the transform :
just like this :
transform: rotate(90deg) translate(150px, -230px);
or you can use another approach:
you can wrap your target element with two outer divs and assign an animation for every div..
just like this
<div class="apply_this_animation">
<div class="apply_this_animation_also">
<img src="https://via.placeholder.com/300x300" alt="#" />
</div>
</div>
and use this in you CSS just like this:
<style>
.apply_this_animation {
transform: rotate(90deg);
}
.apply_this_animation_also {
transform: translate(150px, -230px);
}
</style>
Read More

Activating the animation of one part of a page by clicking an image in another part

After sifting through a bunch of forums and questions on stackoverflow, it seems to me that using JavaScript is a unavoidable here. I have successfully implemented an animation of a list on my site, but I would like the animation to only play after an image has been clicked (and then to close it by clicked again).
This is the animation:
.scale-in-hor-left { -webkit-animation: scale-in-hor-left 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
animation: scale-in-hor-left 1.2s cubic-bezier(0.19, 1, 0.22, 1) both;
}
#-webkit-keyframes scale-in-hor-left {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
#keyframes scale-in-hor-left {
0% {
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
opacity: 1;
}
}
And the image I would like to activate it has nothing special going on
<img id="imagename" src="#" height="#" />
I know the JavaScript looks something like this:
function ani(){
document.getElementById('imagename').className ='scale-in-hor-left';
}
But every time I try some HTML to use the two together, I just end up with a button or nothing, and I have yet to get the animation to stop before the click. (Also, will successfully getting the onclick to work ensure that the animated element is invisible before activation based n the 0%s in the CSS?)

You are right in thinking that you'll want to control the animation with a click event handler; otherwise, as you're seeing, your CSS animation kicks off immediately.
As written, your ani() function will only add your animation class to your target "list" element. You will need to toggle the class name on 'click' to alternately add or remove it. To do that, the event handler needs to determine which action to take.
Assuming that you're attempting to accomplish this in vanilla JavaScript (that is, you aren't using a library like jQuery — which has a .toggleClass() method of its own), you can use the presence of the class name itself to determine this…
var
CLASSNAME_TOGGLE = 'toggle-class',
el_trigger = document.getElementById('trigger'),
el_target = document.getElementById('target');
function toggleClass(event) {
event.preventDefault();
if (el_target.classList.contains(CLASSNAME_TOGGLE)) {
// remove the class
el_target.classList.remove(CLASSNAME_TOGGLE);
} else {
// add the class
el_target.classList.add(CLASSNAME_TOGGLE);
};
}
el_trigger.addEventListener('click', toggleClass, false);
#target {
/* this would be your list's default styles */
padding: 20px;
margin: 20px;
border: 1px solid #fbb;
background: #fee;
}
#target.toggle-class {
/* this would be your list's animation */
border-color: #bfb;
background: #efe;
}
<div id="target">
Your "List" Element [the target of the toggled class]
</div>
<img id="trigger" src="https://via.placeholder.com/300x50?text=Your+Trigger+Image" />

If your okay with using jquery then:
https://api.jquery.com/click/
$("#imagename").click(function() {
$("#imagename").addClass("scale-in-hor-left");
});
Or with vanilla javascript:
document.getElementById("imagename").addEventListener("click", ani); // This calls your function ani

CSS3 animate slide left to right and right to left toggling

So basically I have a process with multiple steps that users will go through. Whenever they click a forward button, I want to slide the current step to the left and slide the next step on from right to left. When hitting backwards, I want the current step to slide off to the right and the previous step to slide in from the left. I have it working so it correctly does the slide on the first click both ways, the problem arrives when I basically try to toggle it (so clicking on forward, then back). When I do this, the thing will slide off correctly, but the previous step does not slide back on, leaving a blank content area. This is the state of the classes once you hit forward first, then hit back:
Here's my animation CSS:
#keyframes slide-in-from-left {
0% { tranform: translate(-100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-left {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
#keyframes slide-in-from-right {
0% { transform: translateX(100%); }
100% { transform: translateX(0%); }
}
#keyframes slide-out-right {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
// Animation Classes
// ------------------------------
.slide-in-from-left {
animation: slide-in-from-left 0.5s forwards;
}
.slide-out-left {
animation: slide-out-left 0.5s forwards;
}
.slide-in-from-right {
animation: slide-in-from-right 0.5s forwards;
}
.slide-out-right {
animation: slide-out-right 0.5s forwards;
}
And then I just have:
[class^="step-"] {
position: absolute;
}
.step-4 {
transform: translateX(-100%);
}
And my jQuery/coffeescript:
goForwardAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-left')
$('.signup .step-' + (step + 1)).addClass('slide-in-from-right')
goBackAStep = () ->
step = $(this).data('step')
$('.signup .step-' + step).addClass('slide-out-right')
$('.signup .step-' + (step - 1)).addClass('slide-in-from-left')
Should I be removing a class somewhere when the steps change? Should I have more classes involved to make sure things are laying off screen where they should?

A simpler approach. 3 clases for the state:
.current {
transform: {translateX(0%);}
}
.moved-left {
transform: {translateX(-100%);}
}
.moved-right {
transform: {translateX(100%);}
}
and a permanent one
.slide {
transition: transform 0.5s;
}

Why can't I reuse a CSS keyframe animation?

I want to have a CSS keyframe animation on submit, every time, but currently it only works the first time. Can you see what I'm doing wrong?
CSS:
#keyframes enlarge {
0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
}
.enlarge {
animation-name: enlarge;
animation-duration: 2s;
JS:
var enlarge = function(response) {
document.querySelector("#messageContainer").classList.add("enlarge");
var reset = setTimeout(function() {
document.querySelector("#messageContainer").classList.remove("enlarge");
}, 2000);
};
I half expected the solution to come to me while I was writing this, but it didn't.

Your code appears to work as intended given your description... Try clicking the "Run Code Snippet" below:
var enlarge = function(response) {
document.querySelector("#container").classList.remove("hidden");
document.querySelector("#example").classList.add("enlarge");
var reset = setTimeout(function() {
document.querySelector("#example").classList.remove("enlarge");
document.querySelector("#container").classList.add("hidden");
}, 2000);
};
#example {
background: red;
width: 150px;
}
#keyframes enlarge {
0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
}
.hidden { display: none; }
.enlarge {
animation-name: enlarge;
animation-duration: 2s;
}
<div id="container" class="hidden">
<div id="example">My example text</div>
</div>
<button onclick="enlarge()">Submit</button>
Are you sure your enlarge function is running on every click of the submit button?
Judging by the fact that your enlarge() function takes a "response" parameter, I'm assuming that you're using it in the response handler of an AJAX request -- does this AJAX request return a non-successful error code if the form has already been submitted once? If this function is attached to the onSuccess() method, that would explain why it is only playing the animation once; the request would only be "succeeding" the first time the button was clicked.

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.)