アニメーションはScriptだと簡単に実装できるのですが、CSSの方が動作が軽く、一般的にはCSSで実装した方が良いらしいので方法を解説。
方法は簡単で@keyframesを記述するだけです。
1.@keyframes
まずは、@keyframesでアニメーション効果を設定しましょう。CSS
@keyframes test {
from {
opacity:0;
}
to {
opacity:1;
}
}要素を透過させるopacityの0から始まり、要素を透過なく表示させる1に向かって進むといった内容なので、要素がふわっと表示されます。
testの部分は任意の文字を記述してください。
2.アニメーション効果を与えたい要素に@keyframesを付与
アニメーション効果を与えたい要素に@keyframesの任意のネーム（上記の場合はtest）を付与してあげれば完成です。
完成版CSS
@keyframes test {
from {
opacity:0;
}
to {
opacity:1;
}
}
.anime-test{
animation-name: test;
animation-duration: 1s;
}animation-durationは遅延時間設の定なので、要素が完全に表示されるまでの秒数です。
最後に、記事トップの「こんな風なアニメーション」のサンプルは以下のようになっています。
@keyframes test-banana {
from {
opacity:0;
}
to {
opacity:1;
}
}
.sample-banana{
animation-name: test-banana;
animation-duration: 5s;
background-color:#42dee1;
height:200px;
width:100%;
}