Geek Answers Handbook

SVG transition from grayscale as css3 transition animation

I am trying to move an element from shades of gray to color using the technique described below:

CSS

.technical .tech-icon { width: 33px; height: 32px; display: inline-block; filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ -webkit-transition: all 0.5s ease-out; /* Safari 3.2+, Chrome */ -moz-transition: all 0.5s ease-out; /* Firefox 4-15 */ -o-transition: all 0.5s ease-out; /* Opera 10.5–12.00 */ transition: all 0.5s ease-out; /* Firefox 16+, Opera 12.50+ */ }

For firefox we have filters.svg

 <svg xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>

How can I simulate the same transition property that works in Chrome, IE9, etc.

Change I want my transition properties to work with my SVG fix for Firefox.

+8
css css3 svg
source share
2 answers

You can overlay an additional element containing a version of the shades of gray in the color version. Then you create opacity ...

  .technical .tech-icon { position: relative; ... } .technical .tech-icon .grayscale { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; -webkit-filter: grayscale(1); filter: url(filters.svg#grayscale); /*Firefox*/ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1) filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); /*IE*/ }

For browsers that don't support CSS transitions, you can animate opacity with jQuery fadeIn()

+4
source share

You can use something like this:

 @-webkit-keyframes grayscale-anim { from { -webkit-filter: grayscale(0); } to { -webkit-filter: grayscale(1); } } .grayscale { -webkit-animation: grayscale-anim 2s ease-in-out; -webkit-animation-direction: alternate; -webkit-animation-iteration-count: infinite; }

Here is a demo of the fiddle: http://jsfiddle.net/SeL2G/

One note, although currently the CSS filter is only implemented in webkit browsers. For compatibility reasons, you can use Javascript as a fallback solution. Here is a small library that does the same job with Javascript: http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

0
source share

More articles:


All Articles