Develop Reference

CSS Animation duration not working in safari during page load

I have a website on which I'm showing a loading animation during page load using SVG and CSS3 animations. It works fine on Chrome and Firefox, but behaves incorrectly during page load on Safari 12.1.2
Until the page is fully loaded and the animation is over, the CSS animation won't have the correct duration, but instead will skip from one keyframe to the other without any transition. Once the page is loaded, the animations will start transitioning correctly between keyframes.
Here is a screencast of the issue: https://streamable.com/shca4
This is the CSS code I'm using for the animations. I use autoprefixer for browser support, but the issue is happening with safari 12.1.2 which should not be using a vendor prefix anyway.
#rightHand{
animation: rightHand 1s infinite 0s ease-in-out;
}
#leftHand{
animation: leftHand 1s infinite 0s ease-in-out;
}
#keyframes rightHand {
0%{
transform: translateX(0%) translateY(0%);
}
50%{
transform: translateX(5%) translateY(5%);
}
100%{
transform: translateX(0%) translateY(0%);
}
}
#keyframes leftHand {
0%{
transform: translateX(0%) translateY(0%);
}
50%{
transform: translateX(-5%) translateY(-5%);
}
100%{
transform: translateX(0%) translateY(0%);
}
}
Not sure if relevant, but I'm using the following code to add some body classes once the page is loaded to hide the animation:
$(window).on('load', function(){
$('body').removeClass('is-loading');
$('body').addClass('dom-loaded');
});
There are no errors in the console. Any idea why this is happening?

Using transform: scale is not appropriately hiding a div

I am trying to hide a div with an animation on some action. My initial pass at it looked as follows:
.row {
height: 50px;
transition: height 200ms ease-in-out;
&.hidden {
height: 0;
}
}
Where my DOM structure was as follows (with react):
<div className={styles.container}>
<div className={styles.row} />
<div className={classnames(styles.row, { [styles.hidden]: !this.state.active })}
</div>
While this did work, it was very slow. I have heard that transforms are efficient to transition in CSS, so I decided to try the following instead.
.row {
height: 50px;
transform-origin: top;
transition: transform 200ms ease-in-out;
&.hidden {
transform: scaleY(0);
}
}
However, within the container, the second row is still displaying as a 50px box, but the inspector says that it has 0 height.
How can this transform be correctly applied to hide the second box?

3D transforms are efficient because the browser will composite the targeted elements into their own layers and offload the animations to the GPU. height and even scaleY() are not 3D transformations and do not benefit from GPU acceleration (the CPU still handles it).
To go back to your example with height, you can force the browser to use GPU acceleration by tricking it with a fake transform property like transform: translateZ(0); (translateZ() is the 3D component of translate3d(), much like scaleZ() is the 3D component of scale3d()).
Here's a quick demo:
document.querySelector('button').addEventListener('click', function() {
document.querySelector('.row').classList.toggle('hidden');
});
.row {
background-color: green;
height: 50px;
overflow: hidden;
transition: height 200ms ease-in-out;
transform: translateZ(0); /* or translate3d(0,0,0), rotateZ(360deg), etc. */
}
.row.hidden {
height: 0;
}
button {
left: 0;
position: absolute;
top: 100px;
}
<div class="row">Some text</div>
<button>Toggle Row Visibility</button>
With the added property, the browser should utilize GPU acceleration, significantly improving the animation. See this question for more information related to transforms and GPU acceleration.
I would recommend trying this first to see if it speeds up the animation enough in your app. You could alternatively try adding the will-change property though this is part of a working draft and currently non-standard.

Unicef web animations

Can someone tell me anything about gate animation and zoom page transition from this Unicef web, I want to try to make this cool animation. At least give me "keyword" how to find it. Are those made with html5 ?

In the Unicef animation the developers are using a mix approach of JavaScript using GSAP JS library and CSS Transitions.
You can have a looks at their code in bundle.js and screen.css files using Chrome developer tools.
Generally you can use:
CSS Keyframe Animation
CSS Transitions
JavaScript vanilla or some libraries
Web Animation API
to animate DOM elements in your HTML page.
To help you to get started I have created a simple scale/zoom effect using CSS Keyframe Animation, but you can reach a similar effect using JavaScript libraries as jQuery, GSAP, Velocity or others.
For more complex animations I would suggest to use a specialized JS library as GSAP, if instead you need more simple, eyes catching animations you could consider also using some pre-made effects:
animate.css (CSS Keyframe Animation)
animatelo.js (Web Animation API) - disclaim I have created this library :)
It really depends of the complexity of you animation and your skill set.
#mario {
background: url(http://vignette1.wikia.nocookie.net/the-new-super-mario-bros/images/7/7e/200px-Mario_Nintendo.png/revision/latest?cb=20140505185215);
background-repeat: no-repeat;
width: 375px;
height: 375px;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-animation: leaves 5s ease-in-out infinite alternate;
animation: marioAnim 5s ease-in-out infinite alternate;
}
#-webkit-keyframes marioAnim {
0% {
-webkit-transform: scale(1.0);
}
100% {
-webkit-transform: scale(2.0);
}
}
#keyframes leaves {
0% {
transform: scale(1.0);
}
100% {
transform: scale(2.0);
}
}
<div id="mario"></div>

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?

Javascript to change keyframe values in external css sheet (No Inline Style Changes!)

What I am trying to do is depending on a variable I get, change the 100% rotate value in the keyframe to the new calculated value. I have no problem with using Javascript to do this, but I want it to be done in the External CSS, not inline, once changed I need to restart the animation for that time. Is this possible? If so, how? (NOTE ALL DONE CURRENTLY THROUGH BUTTON CLICK) this is not to be saved, only done to update the graphic with a new position.
.arrow {
-webkit-animation: rotate 3s linear 0 1;
animation: rotate 3s linear 0 1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-animation-play-state: paused;
animation-play-state: paused;
visibility: visible !important;
}
#-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Any help will be much appreciated! I have been trying to find something that would work for about a week now.

It is possible to change keyframes on loaded stylesheets. Here you have a stack overflow answer from 2011. And here's a link to a recent blog post about it.

So, as adeneo mentioned, it is not possible to make javascript change an external style sheet.
The thing you can do is make 2 css classes and use javascript to change the class. This way you are not using inline styles.
Also, because you are changing the class, the animation will begin from the start - as you want it.