Develop Reference

Using Multiple CSS Transform Functions in Separate Animation Classes Doesn't Work

I am building a subtitle editor that has customisation tools for toggling animations that can scale and move text. Each animation is atomic and has a CSS keyframe. Example of two animations:
#keyframes upward {
from {
transform: translateY(0px);
}
to {
transform: translateY(-30px);
}
}
#keyframes stretch {
from {
transform: scaleY(1);
}
to {
transform: scaleY(1.1);
}
}
Each subtitle uses a specific class, which has the above animations (this can be seen in the code below). Each animation has a checkbox in HTML, whose value JavaScript uses to toggle the animation-play-state property through a custom property (e.g. --happy-animation-stretch-state), which causes the animation to either pause or run.
.happy {
display: inline-block;
color: var(--happy-colour);
animation: upward var(--animation-duration), stretch var(--animation-duration);
animation-play-state: var(--happy-animation-upward-state), var(--happy-animation-stretch-state);
transition: 0.3s;
}
The problem is that only one of the animations works. I am not sure what is wrong?
EDIT: I managed to solve this by enwrapping the element I was trying to transform in multiple divs - one for each animation. Here is the original solution.

Is it possible to make smooth page navigation transitions in Wicket?

I would like to make some smooth transitions between pages navigation in Wicket Java framework. Is it possible with Wicket tools, javascript and css? I cant find a way to do that.
Thanks for any answer.

Wicket does not provide solutions for this. Most of the Wicket applications use either full page re-remder/redirect or Ajax for updating just part(s) of the page, but not the whole body.
I'd suggest you to try with CSS Keyframes. The idea is to add CSS class to the body of your pages on these two JS events: beforeunload and DOMContentLoaded (aka domready). When beforeunload is fired you need to remove fade-in and add fade-out CSS class. And do the opposite for DOMContentLoaded.
The CSS will look like:
/* make keyframes that tell the start state and the end state of our object */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0; /* make things invisible upon start */
-webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
animation-duration:1s;
}
I am not very good in CSS so better ask Google for more info.

CSS: Crossfade animations?

I'm actually expecting the answer to this to be a simple and straight "NO", but I have to ask, maybe someone even already did a dirty workaround.
I made a character using CSS3 only and added an animation that slowly shakes his head. This can be seen as the idle animation. Now I added a specific talk animation (actually seperate, it's aplied to a different <div>) where he holds still and one where he shakes his head strongly. I apply the class .shakehead to the wrapper element via JavaScript at certain events.
#keyframes head-swing {
0% {
transform: rotate(-2deg);
}
50% {
transform: rotate(2deg);
}
100% {
transform: rotate(-2deg);
}
}
.head {
animation: head-swing 7s infinite ease-in-out;
}
.shake .head {
animation: head-swing 1s infinite ease-in-out;
}
Now, when I simply suddenly apply the class to the wrapper, the probability of changing in the middle of the animation and creating an ugly break is pretty high, so the best thing to do would be crossfading both animations. I want to avoid to wait for the animation end via JS, because seven seconds is a little much to wait for.
(my usecase)
If you don't know what I mean, watch this Unity3D tutorial for a minute.
Is such a crossfade in any way possible? (Probably NO)

A crossfade is possible with the opacity poperty. You can use multiple poperties in the same keyframe animation (and I'm pretty surprised that a lot of people don't know that), so don't be afraid to write height changes with of you opacity changes!.
You should also put your "moving mouth" into the same div than you first, at the exact same position and do your crossfade a bit like this.
#keyframes crossfade1 { /*applied on the "first" mouth (still)*/
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes crossfade2 { /*applied on the "second" mouth (moving) [the height is an exemple]*/
0% {
opacity: 0;
height: 3px /*the mouth is closed*/
}
50% {
opacity: 1;
height: 20px /*the mouth is open*/
}
100% {
opacity: 0;
height: 20px /*the mouth is closed*/
}
}
Put the duration as the same for the two keyframe animation and voilà! You have your perfect crossfade without even using javascript!
What do you think?

How is this body fadeIn animation done?

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.

CSS Animation + Javascript Callback

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 );
}