KnowledgeHub
Questions
Tags
Users
Search
Alex Rivera
|
Logout
Edit Question
Title
Body
I'm trying to transition an element from grayscale to color with a technique outlined 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 mimic the same transition property that works on Chrome, IE9 etc? Edit : I am looking to get my transition properties working with my SVG fix for Firefox.
Tags (comma-separated)
Save Edits
Cancel