別のアニメーションの後でアニメーションを開始する（CSS/HTML）

最初のアニメーションが完了した後にアニメーションを開始しようとしていますが、その方法はわかりません。最初のアニメーションの2秒後にテキストをページの先頭に移動したい。ここに私のコードです。感謝:)別のアニメーションの後でアニメーションを開始する（CSS/HTML）

CSS：

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300'); 

body { 
    background-image: url("img/new_y_c_grad.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

.entryText { 
    color: white; 
    font-family: 'Roboto Condensed', sans-serif; 
    font-weight: 500; 
    text-align: center; 
    padding: 260px 0; 
    font-size: 50px; 

} 

.animate { 
    animation-duration: 1.2s; 
    animation-fill-mode: both; 
    animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9); 
} 

.delay-150 { 
    animation-delay: 150ms; 
} 

@keyframes anim-fade-in-up { 
    0% { 
     opacity: 0; 
     transform: translate3d(0, 30px, 0) 
    } 
    50% { 
     opacity: 0.5; 
    } 
    100% { 
     opacity: 1; 
     transform: none 
    } 
} 


.anim-fade-in-up { 
    animation-name: anim-fade-in-up 
}

そしてHTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
     <title>Blank App</title> 
    </head> 
    <body> 
     <script type="text/javascript" src="cordova.js"></script> 
     <link rel="stylesheet" type="text/css" href="main.css"> 

     <h1 class="entryText animate anim-fade-in-up delay-150">Animation here</h1> 

    </body> 
</html>

出典

2017-01-03 Anonymous

あなたはこのfiddle

.animate { 
    animation-duration: 4s; 
    animation-fill-mode: both; 
    animation-timing-function: cubic-bezier(0.2, 0.3, 0.25, 0.9); 
} 

@keyframes anim-fade-in-up { 
0% { 
    opacity: 0; 
    transform: translate3d(0, 30px, 0) 
} 
25% { 
    opacity: 0.5; 
} 
50% { 
    opacity: 1; 
    transform: none; 
    padding-top:260px; 
} 
100% { 
    opacity: 1; 
    transform: none; 
    padding-top:20px; 
}

}

のように、両方のアニメーションを行うには、同じキーフレームを使用することができます

アニメーションの再生時間を増やす

出典

2017-01-03 12:53:56

完全に動作します。どうもありがとうございました。 –

同じ要素でアニメーションのリストを使うことができますが、これは最善の答えではありません。 –

はこのペンを見て：http://codepen.io/TunderScripts/pen/ggOgWz

CSS

div { 
    width: 100px; 
    height: 100px; 
    position: relative; 
    background-color: red; 
    animation: example 4s linear, 4s dude 4s linear; 
} 

@keyframes example { 
    0% { 
    background-color: red; 
    left: 0px; 
    top: 0px; 
    } 
    25% { 
    background-color: blue; 
    left: 0px; 
    top: 200px; 
    } 
    50% { 
    background-color: green; 
    left: 200px; 
    top: 200px; 
    } 
    75% { 
    background-color: yellow; 
    left: 200px; 
    top: 0px; 
    } 
    100% { 
    background-color: red; 
    left: 0px; 
    top: 0px; 
    } 
} 

@keyframes dude { 
    0% { 
    background-color: red; 
    left: 0px; 
    top: 0px; 
    } 
    100% { 
    background-color: cyan; 
    left: 0px; 
    top: 200px; 
    } 
}

あなたが望むどのように多くのアニメーションを作成することができますし、遅延、でもオーバーラップを使用してそれらを積み重ねることができます。これらのパラメータが意味するもののより複雑なビューを得るには、これをお読みくださいhttps://css-tricks.com/almanac/properties/a/animation/。良い一日を！コードをきれいに保つ！

出典

2017-01-03 13:15:19

別のアニメーションの後でアニメーションを開始する（CSS/HTML）

答えて

関連する問題