キーフレームアニメーションiPhone

に取り組んでいないので、私は私のウェブサイト上で再生しようとしているアニメーションを持っている：http://eayusi.design キーフレームアニメーションiPhone

それは関係なく、私が使うものは何でもブラウザの、私のiPhone上で動作していないようです。私はアニメーションの前に-webkit-を追加しましたが、これは他の答えによって示唆されていますが、うまくいかないようです。私は男を得ることができるすべての助けに感謝します。私は現在、最新のiOSでiPhone 6を使用しています。

html 
    { 
    font-size: 62.5%; 
    } 

    body 
    { 
    margin: 0; 
    padding: 0; 
    font-size: 1.6rem; 
    background: black; 
    text-align: center; 
    letter-spacing: 20px; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 900; 
    } 

    .glitch 
    { 
    position:relative; 
    top: 40%; 
    color: white; 
    } 

    .glitch:before, .glitch:after{ 
    content: 'Coming soon'; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background:black; 
    } 

    .glitch:before{ 
    left: 4px; 
    text-shadow: 2px 0 #00ffea; 
    animation: effect 3s infinite linear; 
    -webkit-animation: effect 3s infinite linear; 
    clip: rect(45px, 9999px, 38px, 0); 
    } 

    .glitch:after{ 
    left: -2px; 
    text-shadow: -2px 0 tomato; 
    animation: effect 2s infinite linear; 
    -webkit-animation: effect 2s infinite linear; 
    } 

    @keyframes effect { 
     0% { 
     clip: rect(42px, 9999px, 44px, 0); 
     } 
     5% { 
     clip: rect(12px, 9999px, 59px, 0); 
     } 
     10% { 
     clip: rect(48px, 9999px, 29px, 0); 
     } 
     15.0% { 
     clip: rect(42px, 9999px, 73px, 0); 
     } 
     20% { 
     clip: rect(63px, 9999px, 27px, 0); 
     } 
     25% { 
     clip: rect(34px, 9999px, 55px, 0); 
     } 
     30.0% { 
     clip: rect(86px, 9999px, 73px, 0); 
     } 
     35% { 
     clip: rect(20px, 9999px, 20px, 0); 
     } 
     40% { 
     clip: rect(26px, 9999px, 60px, 0); 
     } 
     45% { 
     clip: rect(25px, 9999px, 66px, 0); 
     } 
     50% { 
     clip: rect(57px, 9999px, 98px, 0); 
     } 
     55.0% { 
     clip: rect(5px, 9999px, 46px, 0); 
     } 
     60.0% { 
     clip: rect(82px, 9999px, 31px, 0); 
     } 
     65% { 
     clip: rect(54px, 9999px, 27px, 0); 
     } 
     70% { 
     clip: rect(28px, 9999px, 99px, 0); 
     } 
     75% { 
     clip: rect(45px, 9999px, 69px, 0); 
     } 
     80% { 
     clip: rect(23px, 9999px, 85px, 0); 
     } 
     85.0% { 
     clip: rect(54px, 9999px, 84px, 0); 
     } 
     90% { 
     clip: rect(45px, 9999px, 47px, 0); 
     } 
     95% { 
     clip: rect(37px, 9999px, 20px, 0); 
     } 
     100% { 
     clip: rect(4px, 9999px, 91px, 0); 
     } 
    } 

    @-webkit-keyframes effect { 
     0% { 
      clip: rect(42px, 9999px, 44px, 0); 
     } 
     5% { 
      clip: rect(12px, 9999px, 59px, 0); 
     } 
     10% { 
      clip: rect(48px, 9999px, 29px, 0); 
     } 
     15.0% { 
      clip: rect(42px, 9999px, 73px, 0); 
     } 
     20% { 
      clip: rect(63px, 9999px, 27px, 0); 
     } 
     25% { 
      clip: rect(34px, 9999px, 55px, 0); 
     } 
     30.0% { 
      clip: rect(86px, 9999px, 73px, 0); 
     } 
     35% { 
      clip: rect(20px, 9999px, 20px, 0); 
     } 
     40% { 
      clip: rect(26px, 9999px, 60px, 0); 
     } 
     45% { 
      clip: rect(25px, 9999px, 66px, 0); 
     } 
     50% { 
      clip: rect(57px, 9999px, 98px, 0); 
     } 
     55.0% { 
      clip: rect(5px, 9999px, 46px, 0); 
     } 
     60.0% { 
      clip: rect(82px, 9999px, 31px, 0); 
     } 
     65% { 
      clip: rect(54px, 9999px, 27px, 0); 
     } 
     70% { 
      clip: rect(28px, 9999px, 99px, 0); 
     } 
     75% { 
      clip: rect(45px, 9999px, 69px, 0); 
     } 
     80% { 
      clip: rect(23px, 9999px, 85px, 0); 
     } 
     85.0% { 
      clip: rect(54px, 9999px, 84px, 0); 
     } 
     90% { 
      clip: rect(45px, 9999px, 47px, 0); 
     } 
     95% { 
      clip: rect(37px, 9999px, 20px, 0); 
     } 
     100% { 
      clip: rect(4px, 9999px, 91px, 0); 
     } 
     } 
    </style> 
</head> 
<body> 
    <h1 class="glitch">Coming soon</h1> 
</body> 
</html>

出典

2017-11-14 Ephraim Yusi

私はそれが含むことによって、モバイルでの作業を取得することができました：

.glitch:before, .glitch:after { 
    clip: rect(0,0,0,0); 
}

Hereはモバイルに取り組んでそれを実証しているCodepenです。私はCodepenにまだ残っているいくつかの変更を加えましたが、これが正しく動作するように変更しました。

私は、CSS-Tricksのanother postに基づいてコードを改変していました。そこで、彼らはSASSを使って作業していました。完全に正直なところ、私はクリッピングやマスクでたくさんの経験がないので、なぜそれがうまくいくのか分かりませんが、そうしています。

編集：clipプロパティが償却されていることにも注意してください。したがって、SVG内部の要素に対してクリップパスを使用する置換実装を見つけることは価値があるかもしれません。私は余分な余暇を見つけるときに私が作成した例を得ることができるかどうかを見ていきます。

出典

2017-11-14 01:21:15

ありがとうございました！そして、はい、私もその記事を見ました。私はSASSを使ったことがないので、完全に回避しました。しかし、本当にありがとう、私はまだ多くのことを学ぶ必要があります。 –

もちろん！メモと同様に、最も正確な回答を受諾回答としてマークするのが一般的です。 CSSで快適に作業できるようになると、SASS/LESSやその他のCSSプリプロセッサもチェックする価値があります。彼らは、大規模なプロジェクトを編成し、繰り返しコードの大きなセクションを生成することでかなり助けになります。 –

キーフレームアニメーションiPhone

答えて

関連する問題