画像を徐々に表示するアニメーションをCSSで コピペで使えるHTML+CSS

スポンサーリンク
LINEで送る
Pocket

画像、img要素を徐々に表示するアニメーション。opacityを使って透明度を操作します。

画像imgを徐々に表示 (透明度の操作)

スタイルシート属性で記述
<img class=""animation1" src="sakura.jpg" />
@keyframes open-keyanime1{ /* アニメーションの動き */ 
  0% {
    opacity:0; /* 完全に透明 */ } 
  100% {
    opacity:1; /* 透明度無し、通常表示 */ } } 
.animation1{ 
  animation-name: open-keyanime1 ; 
  animation-duration: 5s; /* 5秒間で表示 */ 
  animation-fill-mode: both;  
  animation-iteration-count: 10;  /* 10回実行させています */
}

必ず透過度で指定してください。

画像imgを徐々に上から表示 (高さの操作)

スタイルシート属性で記述
<img class=""animation2" src="sakura.jpg" />
@keyframes open-keyanime2{ /* アニメーションの動き */ 
  0% { max-height:0; /* 完全に透明 */ } 
  100% { max-height:1000px; /* 透明度無し、通常表示 */ } } 
.animation2{ 
  overflow-y: hidden;
  animation-name: open-keyanime2 ; 
  animation-duration: 5s; /* 5秒間で表示 */ 
  animation-fill-mode: both; 
  animation-iteration-count: 10; /* 10回実行させています */
}

overflow-yによって、imgがはみ出さないようにしています。必ず、max-heightで指定してください。heightの場合は、思ったように表示されません。

マウスオーバーによって画像が徐々に白くなるアニメーション

画像にカーソルを合わせると徐々に白いぼやをかける方法 コピペで使えるHTML+CSS
画像、img要素にマウスカーソルを合わせると、徐々に白くなり、離すと徐々に元の画像に戻る。hoverの逆も含め、hoverの前後にアニメーションを付けます。 ...
LINEで送る
Pocket

タイトルとURLをコピーしました