We would like to know how to animate on image color with CSS3 Filter.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.omg-cat {<!--from www . j av a 2 s . co m-->
-webkit-animation: invert 1s forwards 1s;
}
.omg {
color: red;
position: relative;
top: -100px;
left: 220px;
text-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
opacity: 0;
-webkit-animation: omg 2s ease-out forwards 2s;
}
@-webkit-keyframes invert {
0% { -webkit-filter: none;}
100%{-webkit-filter: invert();}
}
@-webkit-keyframes omg {
40% {opacity: 0;font-size: 0em;}
100%{opacity: 1;font-size:5em; }
}
</style>
</head>
<body>
<div>
<img
src="http://www.java2s.com/style/download.png"
class="omg-cat" />
<div class="omg">java2s.com</div>
</div>
</body>
</html>
The code above is rendered as follows: