10

リンクにカラー アニメーションを設定しようとしています。リンクが Chrome でアクセスされると、カラー アニメーションは適用されなくなります。これは、他のアニメーション スタイル (背景色、フォントの太さ、フォント サイズをテストしました) や他のブラウザー (Firefox、Safari、IE11) には当てはまりません。

ここにデモがあります：

http://codepen.io/benjarwar/pen/rVJbeR
http://s.codepen.io/benjarwar/debug/rVJbeR

HTML:

<a href='#' target='_blank' class='color'>Color Animation</a>

CSS:

a.color,
a.color:visited {
  -moz-animation: color-animation 1s ease-in-out infinite;
  -webkit-animation: color-animation 1s ease-in-out infinite;
  animation: color-animation 1s ease-in-out infinite;
}

@-moz-keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

@-webkit-keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

@keyframes color-animation {
  0% { color: #f00; }
  50% { color: #fc0; }
  100% { color: #f00; }
}

再現する手順：

  1. 上記のリンクにアクセスしてください
  2. リンクのアニメーションが異なることに注意してください
  3. いずれかのリンクをクリックします (すべて href="#" を指しています)。
  4. カラー アニメーション リンクがアニメーション化されていないことに注意してください。
  5. ブラウザの履歴からリンクを削除して更新する
  6. リンクが履歴から削除されると、アニメーションが戻ることに注意してください

Mac OS 10.9.5 で Chrome バージョン 43.0.2357.130 を使用する

4

2 に答える 2

1

以前はアニメーションを使用できたかもしれませんが、現在ではほとんどのブラウザーが訪問済みでの css スタイルの使用を制限しています。許可されているプロパティのみが

  1. 色
  2. 背景色
  3. ボーダの色
  4. アウトラインカラーと
  5. 塗りと線のプロパティの色の部分。

ソース

どうして

以前の人々は、訪問したハックを使用して、訪問したWebサイトを見つけていました.

http://dbaron.org/mozilla/visited-privacy

于 2016-04-06T07:09:01.360 に答える
1

これは、過去の一般的なセキュリティ/プライバシーの問題に関連していると思います。

訪問済みリンクのスタイル設定に使用できる CSS プロパティを、color、background-color、border-*-color、outline-color、および fill と stroke プロパティの色部分に制限しています。

https://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/ https://blog.mozilla.org/security/2010/03/31/plugging-the- css-履歴リーク/

于 2015-11-10T19:38:32.623 に答える