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

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

INDEX

画像imgを徐々に表示 (透明度の操作)
画像imgを徐々に上から表示 (高さの操作)
マウスオーバーによって画像が徐々に白くなるアニメーション

画像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の場合は、思ったように表示されません。