content </div> css div.main{ animation-name: fadeInA;//名前をつける animation-duration: 3s;//秒数 } @keyframes fadeInA { 0% {opacity:0;} 100% { opacity:1;} }...">

ウェブデザイナーのウェブ開発メモ

[PR] Another American Dictionary Spanglish with us!

CSSだけでフェードイン

jqueryとはおさらば

animation の基本系をメモ

js不要でページローディングしたらコンテンツをフェードインさせるCSS

html

<div class="main">
    content
</div>

css

div.main{
  animation-name: fadeInA;//名前をつける
  animation-duration: 3s;//秒数
}
@keyframes fadeInA {
    0% {opacity:0;}
    100% {  opacity:1;}
}
関連記事
この記事役にたった?
管理者にだけメッセージを送る

カテゴリー

広告

最近の記事

便利ツール