cssで要素を下から上に表示させる
cssで要素を下から上に表示させる方法になります。
各記述した内容の、解説もしております!
記述を変えれば、表示させる開始時間など変えられます。
例)コード
太郎を下から上に表示させます。
こちらは
・最初は表示されていない
・1秒後にアニメーション開始
・下から上に0.5秒で表示させる
HTML
<p class="name">太郎<p>
css
.name {
opacity:0;
animation-name:anime;
animation-duration:0.5s;
animation-delay: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes anime {
0% {
opacity: 0;
transform: translateY(30px);
}
100%{
opacity: 1;
transform: translateY(0);
}
}
解説
css
name {
opacity:0; #要素の不透明度を設定.0は透明
animation-name:anime; #@keyframesと同じ名前の必要あり
animation-duration: 0.5s; #アニメーション周期が完了するまでの所要時間を設定します。0.5だと素早くで画面に表示されます。5sだと5秒かけてゆっくり表示されます。
animation-delay: 1s; #アニメーションが起動するまでの時間。5sにすると画面更新5秒後にアニメーションが開始する。
animation-iteration-count: 1; #アニメーションが再生される回数を指定します。
animation-fill-mode: forwards; #アニメーション再生中・再生後のスタイルを指定します。こちらは、再生後、最後のキーフレーム(100%)のスタイルが適用される。
}
@keyframes anime { #@animation-nameと同じ名前の必要あり、今回は「anime」
0% {
opacity: 0;
transform: translateY(30px); #0%なので、アニメーション始まった際に、transform: translateY(30px);の場所にアイテムが配置される
}
100%{
opacity: 1;
transform: translateY(0); #100%なので、アニメーション終わった際に、transform: translateY(00x);の場所にアイテムが配置される
}
}
css
name {
opacity:0; #要素の不透明度を設定.0は透明
animation-name:anime; #@keyframesと同じ名前の必要あり
animation-duration: 0.5s; #アニメーション周期が完了するまでの所要時間を設定します。0.5だと素早くで画面に表示されます。5sだと5秒かけてゆっくり表示されます。
animation-delay: 1s; #アニメーションが起動するまでの時間。5sにすると画面更新5秒後にアニメーションが開始する。
animation-iteration-count: 1; #アニメーションが再生される回数を指定します。
animation-fill-mode: forwards; #アニメーション再生中・再生後のスタイルを指定します。こちらは、再生後、最後のキーフレーム(100%)のスタイルが適用される。
}
@keyframes anime { #@animation-nameと同じ名前の必要あり、今回は「anime」
0% {
opacity: 0;
transform: translateY(30px); #0%なので、アニメーション始まった際に、transform: translateY(30px);の場所にアイテムが配置される
}
100%{
opacity: 1;
transform: translateY(0); #100%なので、アニメーション終わった際に、transform: translateY(00x);の場所にアイテムが配置される
}
}
Author And Source
この問題について(cssで要素を下から上に表示させる), 我々は、より多くの情報をここで見つけました https://qiita.com/uot/items/324173911924b2f10939著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .