0

このFiddleでは、コンテナー要素で「グロー」効果を得ようとしています。

#box {
  width: 100px;
  height: 100px;
  margin: 10px;
  animation: glow 2s ease-in-out infinite alternate;
  -webkit-animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
  from {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);}
  to {background-image:radial-gradient(circle farthest-side at center, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);}
}
@-webkit-keyframes glow {
  from {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 24px);}
  to {background-image:-webkit-radial-gradient(center,circle farthest-side, rgba(255,0,0,0) 24px, rgba(255,0,0,1) 24px, rgba(255,0,0,0) 48px);}
}

IE10 では動作しますが、何らかの理由で Chrome では「to」状態をレンダリングするだけで、まったくアニメーションしません。Webkit でグラデーションをアニメーション化できますか?

4

1 に答える 1

0

さらに調べbackground-imageてみると、グラデーションであっても、Webkit でアニメーション化可能なプロパティではないようです。

これは残念ですが、少なくとも代わりに静的なグローが表示されるので、それは何かだと思います.

于 2012-12-19T05:37:23.453 に答える