CSSのキーフレームアニメーションの国境問題

私はスムーズにいくつかのCSSの三角形をアニメーション化しようとしている、私はこれがあります。CSSのキーフレームアニメーションの国境問題

を何もの起こりません - 誰もが正しい方向に私をしてください指すことができます。

ありがとう：

.angle-1 { 
     position: absolute; bottom: 0; 
     width: 0; height: 0; 
     border-style: solid; 
     border-width: 200px 0 0 1440px; 
     border-color: transparent transparent transparent #007bff; 
     opacity: 0.7; 
     -webkit-animation: moveangle1 2s infinite; 
     -moz-animation: moveangle1 2s infinite; 
     -o-animation: moveangle1 2s infinite; 
     animation: moveangle1 2s infinite; 
    } 
     @keyframes moveangle1, 
     @-o-keyframes moveangle1, 
     @-moz-keyframes moveangle1, 
     @-webkit-keyframes moveangle1 { 
      0% { border-width: 200px 0 0 1440px; opacity: 0.7; } 
      100% { border-width: 400px 0 0 1000px; opacity: 0.4; } 
     }

ここでは一例です：https://jsfiddle.net/sp2emgtc/

出典

2016-09-29 MrPHP

コード助けを求める質問は、質問自体に**それを再現するために必要な最短のコードを含める必要があります**好ましくは[**スタックスニペット**]（HTTPSで：//ブログ.stackoverflow.com/2014/09/introduction-runnable-javascript-css-and-html-code-snippets /）。 [**最小限で完全で検証可能なサンプルを作成する方法**]（http://stackoverflow.com/help/mcve） –

しかし、私は 'border-width'を**略語**として扱うことはできません。個々のプロパティをアニメートしてみてください。 - https://developer.mozilla.org/en/docs/Web/CSS/border-width –

ありがとう@Paulie_D HTMLディビジョンがないJSFiddleを追加しました。私はborder-top-widthで試してみたが、それは役に立たなかった。また、不透明度も変更されていません。 – MrPHP

あなたは、単一のルールにベンダー接頭辞キーフレーム文を組み合わせることはできません。

これらは別途記載する必要があります。

.angle-1 { 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 200px 0 0 1440px; 
 
    border-color: transparent transparent transparent #007bff; 
 
    opacity: 0.7; 
 
    -webkit-animation: moveangle1 2s infinite; 
 
    animation: moveangle1 2s infinite; 
 
} 
 
@-webkit-keyframes moveangle1 { 
 
    0% { 
 
    border-width: 200px 0 0 1440px; 
 
    opacity: 0.7; 
 
    } 
 
    100% { 
 
    border-width: 400px 0 0 1000px; 
 
    opacity: 0.4; 
 
    } 
 
} 
 
@keyframes moveangle1 { 
 
    0% { 
 
    border-width: 200px 0 0 1440px; 
 
    opacity: 0.7; 
 
    } 
 
    100% { 
 
    border-width: 400px 0 0 1000px; 
 
    opacity: 0.4; 
 
    } 
 
}

<div class="angle-1"> 
 

 
</div>

出典

2016-09-29 09:28:56

パーフェクト！ありがとう@Paulie_D！ – MrPHP

CSSのキーフレームアニメーションの国境問題

答えて

関連する問題