移動する代わりに三角形のアニメーションを伸ばす

Question

このfiddleの移動オーバーレイの三角形が、フォレストのイメージに合わせてアニメーションを伸ばしたいと思います。あなたが今見ているような問題は、それが上に空白を作り、それを伸ばすのではなく三角形を動かすことです。誰かがスマートな解決策を得た場合は、コメントしてください。

これらの値を変更しようとしましたが、正常に動作しません。

border-left: 47.5vw solid transparent; 
border-right: 47.5vw solid transparent; 
border-top: 95vh solid rgba(255, 255, 255, 0.2); 

Answer 1

あなたが国境の95vw（2倍47.5）幅（左/右）、ボーダートップの95vhを持っているし、あなただけの翻訳でそれを下に移動するのでそれは、動作しません。私はより良い方法が

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
     border-left-width: 47.5vw; 
     border-right-width: 47.5vw; 
     left: 2.5vw; 
     border-top-width:95vh; 
     top: -5vh; 
    } 

    40% { 
     border-left-width: 50vw; 
     border-right-width: 50vw; 
     left: 0; 
     border-top-width: 100vh; 
     top: 0vh; 
    } 
} 

https://jsfiddle.net/2j29b9d4/

Answer 2

「バウンス」アニメーションを変更するだけです。スケールプロパティを追加します。

.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
     -webkit-transform: translateY(0) scale(1); 
    } 

    40% { 
     -webkit-transform: translateY(10vh) scale(2); 
    } 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
     transform: translateY(0) scale(1); 
    } 

    40% { 
     transform: translateY(10vh) scale(2); 
    } 
} 

https://jsfiddle.net/fbnwj3ag/5/