Color Animation / Transition q? - Alternative

I’ve been playing w/ a gradient background fill on some text. 4 colours @ an angle.

I thought that I would be able to give it a smooth animation but alas that’s not the case, and in fact, I read somewhere that animating the gradient (if not colour on a whole) isn’t possible.

Here’s what this quick little bit looked like.



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Advent+Pro:100,300,400,600' rel='stylesheet' type='text/css'>
<title>Untitled Document</title>

<style>

	span{

		font-family: 'Advent Pro';
		font-weight: 400;
		font-size: 10em;	
		margin-left: 1em;
		text-transform: uppercase;
		background: -webkit-linear-gradient(-75deg, yellow, red 60%, rgb(0,255,555) 69%, blue 85%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-webkit-animation: kaleidoscope 4s ease infinite;
	
	}
	
	@-webkit-keyframes kaleidoscope {
		
		0%, 100% {
			background: -webkit-linear-gradient(-75deg, yellow, red 60%, rgb(0,255,555) 69%, blue 85%);
		}
		25% {
			background: -webkit-linear-gradient(-75deg, blue, yellow 60%, red 69%, rgb(0,255,555) 85%);
		}
		50% {
			background: -webkit-linear-gradient(-75deg, rgb(0,255,555), blue 60%, yellow 69%, red 85%);
		}
		75% {
			background: -webkit-linear-gradient(-75deg, red, rgb(0,255,555) 60%, blue 69%, yellow 85%);
		}
		
	}
	
	
</style>

</head>

<body>
<span>HENRI</span>
</body>
</html>

This is running in what looks like steps right now. Am I really assed out?? I’m looking for a smooth, all CSS3 solution, and in fact was looking @ an in-line svg solution for a whilst but opted out of it since I thought i’d be best in CSS. Any erudites out there w/ a solution??

The end goal is something like this header. But for some reason, I can’t find the animation/transitions in the code to see how he banged that out. Maybe I’m blind but it’s totally escaping me.

I was thinking of creating a sprite maybe, but I know there must be something less time consuming somewhere! :wink:

Thanks gents.

H!

They styles for the transition are in the <head> of that page.

Hi Henri
CSS gradients are images, so they are values for the background-image property.
According the CSS specs [1] the background-image property isn’t elegible for CSS animations.

[1] http://www.w3.org/TR/css3-transitions/#animatable-properties

Regards

That page uses a long image which is dragged across the background but only shows inside the text which is also a transparent image where the text portion is only transparent.

You could do the same thing with a linear gradient but will need to duplicate the content or set heights and widths.

e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Advent+Pro:100,300,400,600' rel='stylesheet' type='text/css'>
<title>Untitled Document</title>
<style>
div {
	display:inline-block;
	position:relative;
	overflow:hidden;
	font-family: 'Advent Pro';
	font-weight: 400;
	font-size: 10em;
	margin-left: 1em;
	text-transform: uppercase;
	-webkit-text-fill-color: transparent;
}
div:after {
	content:"Henri";
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:999em;
	background-image: -webkit-linear-gradient(right, #C9A1BB 0%, #C3DBC3 48%, #F2C2E1 83%, #EAFFEA 100%, #D5D1FF 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: kaleidoscope 4s ease infinite;
}
 @-webkit-keyframes kaleidoscope {
 0%, 100% {
 background-position: 0 0;
}
 25% {
 background-position: -200em 0;
}
 50% {
 background-position: -400em 0;
}
 75% {
 background-position: -600em 0;
}
}
</style>
</head>

<body>
<div>HENRI</div>
</body>
</html>

Or something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Advent+Pro:100,300,400,600' rel='stylesheet' type='text/css'>
<title>Untitled Document</title>
<style>
div {
	display:inline-block;
	position:relative;
	overflow:hidden;
	font-family: 'Advent Pro';
	font-weight: 600;
	font-size: 10em;
	margin-left: 1em;
	text-transform: uppercase;
	-webkit-text-fill-color: transparent;
}
div:after {
	content:"Henri";
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:99em;
	background-image: -webkit-linear-gradient(left, #D1EEFF 0%, #B974ED 5%, #7BCC5D 10%, #888858 15%, #53B9FD 20%, #08318B 25%, #EB789E 30%, #18C509 35%, #0A997D 40%, #6CF733 45%, #DD4046 50%, #8F3F3C 55.00000000000001%, #C5D359 60%, #FEBAC6 65%, #50BEFB 70%, #3A495A 75%, #D02721 80%, #FAFB92 85%, #0DAF53 90%, #6EFDB0 95%, #E4EF4C 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: kaleidoscope 38s ease infinite;
}
 @-webkit-keyframes kaleidoscope {
 0% {
 background-position: 0 0;
}
 25% {
 background-position: -25em 0;
}
 50% {
 background-position: -50em 0;
}
 75% {
 background-position: -75em 0;
}
 100% {
 background-position: -99em 0;
}
}
</style>
</head>

<body>
<div>HENRI</div>
</body>
</html>