0
まず、私は同様の質問では、このリンクを見ましたが、私は解決策がrelavantありませんので、私のCSSでアニメーションを使用しました：
CSS marquee doesn't work on Safariマーキー交換は（Windowsの10）のSafari 5.1.7で動作しない
私のコードは、Chrome、FireFox、Opera、IE、およびEdgeで正常に動作します。しかし、Safariではそれはしません（テキストは動かない）。
これは私のhtmlです：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="format.css">
</head>
<body>
<h1>updates</h1>
<div class="microsoft container">
<p class="marquee">
update 1
<br><br>
update 2
<br><br>
update 3
</p>
</div>
</body>
</html>
そして、これは私のCSSファイルです：私は間違ってここにいる
.container {
width: 93.5%;
height: 8em;
margin: 1em auto;
overflow: hidden;
background: white;
position: relative;
box-sizing: border-box;
}
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 15s linear infinite;
}
.marquee:hover { animation-play-state: paused; }
/* Make it move! */
@keyframes marquee {
0% { top: 8em }
100% { top: -11em }
}
/* Make it look pretty */
.microsoft .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
font: 1em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.microsoft:before, .microsoft::before,
.microsoft:after, .microsoft::after {
left: 0;
z-index: 1;
content: '';
position: absolute;
pointer-events: none;
width: 100%; height: 2em;
background-image: linear-gradient(180deg, #FFF, rgba(255,255,255,0));
}
.microsoft:after, .microsoft::after {
bottom: 0;
transform: rotate(180deg);
}
.microsoft:before, .microsoft::before { top: 0; }
/* Style the links */
.vanity {
color: #333;
text-align: center;
font: .75em 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
.vanity a, .microsoft a {
color: #1570A6;
transition: color .5s;
text-decoration: none;
}
.vanity a:hover, .microsoft a:hover { color: #F65314; }
？
あなたは '-webkit-アニメーションのように、接頭辞のCSSを使用する必要があります....' – LGSon
とSafari 5.1.7は、多かれ少なかれ死んでいるので、なぜ1つをターゲット？ .. Appleは数年前にサポートを停止しました（Windows版） – LGSon
"-webkit-animation："で "animation"を切り替えることを意味しますか？私はそれを試して、それが動作しないため。あなたの2番目の対応のために、私はSafari 5.1.7を使用して、私のWebと異なるブラウザの互換性をチェックしています。 – John