8

以下に概説する手法を使用して、要素をグレースケールからカラーに移行しようとしています。

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+ */
      }

Firefoxの場合、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>

Chrome、IE9などで機能するのと同じ遷移プロパティを模倣するにはどうすればよいですか？

編集：Firefox用のSVG修正でトランジションプロパティを機能させることを目指しています。

4

2 に答える 2

5

グレースケール バージョンをカラー バージョンに保持する追加の要素をオーバーレイできます。次に、不透明度をアニメーション化します...

 .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*/
  }

CSS トランジションをサポートしていないブラウザーの場合、jQuery の不透明度をアニメーション化できます。fadeIn()

于 2012-09-26T09:56:53.370 に答える
0

次のようなものを使用できます。

@-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;
}

フィドルのデモは次のとおりです: http://jsfiddle.net/SeL2G/

ただし、現時点では、CSS フィルターは webkit ブラウザーにのみ実装されていることに注意してください。互換性の理由から、フォールバック ソリューションとして Javascript を使用できます。これはJavascriptで同じ仕事をする小さなライブラリです: http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

于 2012-09-26T09:23:37.297 に答える