We Keep Coding

CSS animation rendering inconsistently on iOS

I'm trying to make a div repeatedly appear instantly and slowly fade-out, at arbitrary intervals.
JS used to make the div appear:
div.classList.remove('fade-out');
div.offsetWidth;
div.classList.add('fade-out');
With this CSS:
.fade-out {
animation: fadeOut 2.5s ease-out;
}
#keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
div { opacity: 0; }
For some reason, this works as expected in desktop Chrome, Safari & Firefox, but on iOS around half of the time the animation isn't played — the div just disappears after 2.5 seconds with no progressive opacity change. This happens both on both iPhone and iPad, with both Firefox and Safari.
Stuff tried since the initial post:
Add animation: none to the element's original definition.
Set the animation property through JS instead.
Use 100% and 0% instead of to and from.
Setting the div's initial opacity to 1 instead of 0 and add animation-fill-mode: forward.
Add a short delay with setTimeOut.
Use full animation definition instead of shorthand notation.
Additional definition using -webkit-animation and #-webkit-keyframes.
Using any of the above doesn't have an effect on the animation, which still works as expected everyhere except on iOS.
(Not a real) solution
The only way I could make iOS display the animation consistently was by adding a short delay to the animation:
animation: fadeOut 2.5s ease-out 0.01s
However, since the div's "instant display then fade-out" animation can be triggered while an old animation is still running on it, the delay adds a noticeable one-frame flash which is undesirable (regardless of how low I set the delay value).
Any ideas?

Animating SVG path with CSS in IE11

THE BACKGROUND
I'm working on a game in the style of Symon, where a user has to click elements in the right order as the computer generates a random sequence.
The elements are made out of SVG paths.
I wish to have a PENDING status on the game, where one of the elements is flashing repeatedly to draw user interaction
I'm working on IE11
THE ISSUE
I can't seem to get the Paths to animate a flashing color. I'm not very experienced with css animation but it seems like I've done everything right, and I've used many different examples to write this bit of code. It's ignoring the class pending that is meant to infinitely animate the path element.
#-webkit-keyframes flash {
0% {
fill: black;
}
100% {
fill: #ff7420;
}
}
#keyframes flash {
0% {
fill: black;
}
100% {
fill: #ff7420;
}
}
.game_tri.pending path {
transform:translatey(-100px);
animation-name: flash;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
-webkit-animation-name: flash;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
Full code on:
JSFIDDLE https://jsfiddle.net/tomshanan/oushonob/10/
BONUS QUESTION
I would love to know if anyone can tell why the game stops working once I remove active from the game_tri classes on line 9.
$(document).ready(function () {
$(".game_tri").attr("class", "game_tri active pending");
reset_game();
});
When you press the Next Round button, this should reinsert that class anyway, but the game does not respond if that class is removed initially. I don't understand why.

IE prior to IE Edge does not support CSS animations applied to SVG elements.

I want an animation to trigger on active and continue once the active state is gone

I want an animation to start when someone clicks a button but to continue/finish when they unclick.
&:active > .ripple {
-webkit-animation: ripple 3s infinite;
}
The animation only continues so long as the button is held down. Is there a way to achieve this with just css or will I need to use JS? I'm pretty green when it comes to JS so was hoping to achieve with just css.
Thanks!

Did you try the CSS property
&:focus > .ripple {
-webkit-animation: ripple 3s infinite;
}
It's basically the 'onclick' in JavaScript
Tell me if if works for you
Cheers !

Slideshow with content animated in CSS

I have a slideshow with 3 images. For each of the image I have need to add some content on top of the image, and the text need to move from right to left, and gone in 3 secs. Then it will slide to the 2nd image, and again, I have to display the content from right to left again, this time with a background box at the back of the text.
How can I do this kind of animation in css? Moreover, this slider need to be compatible for all browsers.
Can anyone give me a hint?
Thanks in advance.

You can totally do that kind of animation with CSS, but you would have to use javascript to trigger the animations. The method you are talking about would not work for all browsers. If you can use jQuery for your projects, then you can use the animate feature. Plus it would be compatible for essentially all browsers that people use.
For the CSS approach, you would use the animation property, like this
#keyframes {
from { color: #fff; } to { color: #000; }
}
#-webkit-keyframes {
from { color: #fff; } to { color: #000; }
}
.myanimatedclass{
animation: myanimation 2s ease-in;
-webkit-animation: myanimation 2s ease-in;
}
For the jQuery approach, look up jQuery's animate feature. You will find all that you need.
https://api.jquery.com/animate/

CSS3 Run Page Transition When Html Rendered

I have a simple CSS3 fade in page transition, which works well (ONLY care about IE10+). Here's what it looks like:
HEAD
body
{
opacity: 0;
transition: all 1s ease;
}
.loaded
{
opacity:1;
}
BODY
<body onload="document.body.classList.add('loaded');">
The only problem now, is that if the page has a lot of images, the onload event is triggered only when all of them are downloaded.
What can I do, using pure javascript or CSS to do the fade in, even while images are downloading?
NOTE: Can't use any external js files or frameworks.

As you only care about IE10+ (and other major browsers I assume), you can use the HTML5 event DOMContentLoaded.
document.addEventListener('DOMContentLoaded', function () {
document.body.classList.add('loaded');
}, false);
This is supported in Chrome 0.2+, FF 1.7+, IE 9+, Opera 9+ and Safari 3.1+.

You could use pure CSS
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
.element-to-fade-in
{
opacity:1;
animation: fadein 1s;
}
Don't forget to add the prefixes