 |
 |
前号へ
このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。おちゃのこネットの刑部です。
今回のデザイン道場は、CSSアニメーションで写真をフェードイン表示する方法をご紹介します。
 |
|
 |
 |
スタイルシートを編集する
デザイン管理→スタイルシートの編集から下記の指定をコピーして貼り付けて下さい。
※貼り付け位置は、最下部にお願い致します。
●HTML
<div class="fade"><img src="https://cafe-responsive.ocnk.net/data/cafe-responsive/image/003.jpg" width="600" /></div>
●スタイルシート
.fade {
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
margin: 50px 0px;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.