わかりました、CSSトランジションのみを使用してページがロードされたときにアニメーションを実現することができました(一種!):
私は 2 つの CSS スタイル シートを作成しました。
これをどのように達成したかは完全にはわかりませんが、2 つの css ファイル (両方ともドキュメントの先頭にあります) が次のように JavaScript で区切られている場合にのみ機能します。
これを Firefox、Safari、Opera でテストしました。アニメーションが機能することもあれば、2 番目の css ファイルに直接スキップすることもあり、ページが読み込まれているように見えても何も表示されないことがあります (おそらく私だけでしょうか?)。
<link media="screen,projection" type="text/css" href="first-css-file.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){ // Update class to point at the head of the list
});
}
});
</script>
<link media="screen,projection" type="text/css" href="second-css-file.css" rel="stylesheet" />
ここに私の進行中のウェブサイトへのリンクがあります: http://www.hankins-design.co.uk/beta2/test/index.html
たぶん私は間違っているかもしれませんが、CSS トランジションをサポートしていないブラウザーは、遅延や継続なしに 2 番目の CSS ファイルに直接スキップする必要があるため、問題は発生しないはずだと思いました。
この方法が検索エンジンにどのように適しているかについての見解を知りたいです。黒い帽子をかぶっていれば、ページにキーワードを入力し、不透明度に 9999 秒の遅延を適用できると思います。
検索エンジンが transition-delay 属性をどのように処理するか、また、上記の方法を使用してページ上のリンクや情報が表示されるかどうかを知りたいです。
さらに重要なことに、ページが読み込まれるたびにこれが一貫していない理由と、これを修正する方法を本当に知りたいです!
他に何もないとしても、これがいくつかの見解や意見を生み出すことができることを願っています!