Animation Test Piece Works in Chrome, but not in IE11, Firefox, or Edge - Suggestions?

Whilst the Codepen itself is going to look more than a little ridiculous, it will serve the purpose for the question. I created this following a tutorial with it’s own built-in code editor, where both the CSS and JS are all completed inline with the HTML.

What’s supposed to happen, is that the robot’s eyes flash on/off red when the appropriate button is clicked. This works perfectly on Chrome, but won’t behave on any other browser I’ve tried it in (current versions of IE, FF & Edge). Can anyone suggest what I’m missing, as according to caniuse.com, all are capable of using all the CSS that’s been used in it.

Anyway, here’s the pen…

http://codepen.io/ChrisofArabia/full/ZQRJzW/

I confirm that it doesn’t work in FF :smiley:

Given the subject matter, some may consider this a good thing… :stuck_out_tongue:

Maybe. The sad thing is that I can’t offer any suggestion (not to say a solution) for it. I’ll try to have a look at it later but I can’t promise that I’ll have the time.

My only thought, is it might have something to do with the vendor prefixes, or at least the order of them. That said, they are as they appeared in the tutorial.

Shouldn’t the @keyframes come last?

I was thinking the same thing: the version without prefixes should come last. But that doesn’t seem to fix it.

I believe the animation of gradients is only supported in webkit at the moment.

What you could do is put two gradients on top of each other and then animate the opacity from zero to one to get the effect

Working example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.laser:after {
	animation: blink .5s infinite;
}
.brain,.brain:after {
	background: radial-gradient(circle, white 15%, transparent 40%), #cc5;
	background-size: 75px 150px;
	height: 150px;
	width: 150px;
	border-radius: 60px 60px 10px 10px;
	border-bottom: 40px solid #666;
	position: relative;
	left: 70px;
}
.brain:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	background: radial-gradient(circle, red 15%, transparent 40%), #cc5;
	background-size: 75px 150px;
	opacity:0;
}
@keyframes blink {
 50% {
 	opacity:1;
	}
}
</style>
</head>

<body>
<div class="brain"> </div>
<button class="flash">laser eyes on/off</button>
<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(".flash").click(function() {
  $(".brain").toggleClass("laser");
});
</script>
</body>
</html>
1 Like

Strictly speaking the prefixes should always come first and the real property comes last. Otherwise you could find that the prefixed version is being used on the page and the spec may be slightly different to the final version as has happened a few times now (border-radius an linear gradients for example).

2 Likes

That I guess would do it. I didn’t spot any mention of that on caniuse, but then that really concentrates on specific tags/properties in isolation, rather than whether they necessarily combine with each other.

It’s a nice neat solution you’ve come up with though. It just shows how many different ways that are, to come up with either the same, or very similar, results using bread and butter html/css/js components.

Thanks for the help.

The problem is that 'background-image’ has never been an animatable property and linear gradients are produced using background-image property. I guess in the future an exception may be made for gradients but webkit at present is the only one that animates this property.

Yes that’s the beauty of css :smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.