webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

CSS3でのアニメーション・transition編

CSS3によるアニメーションは大きく分けて、トランジション(transition)とアニメーション(animation)の2つに別ける事が出来ます。

CSS3におけるトランジション(transition)とアニメーション(animation)の違い

「transition」

  • 動かすために:hoverなどのきっかけが必要
  • トランジションでは実行後に元のプロパティ値に戻る
  • 比較的簡単な記述で動かす事が可能

「animation」

  • transitionより細かい設定が可能
  • 記述が複雑
  • 「@keyframes」の記述が必要
「transition」を使ったホバーアクション

今回は「transition」を使い、ホバーアクションを設定します。


transitionでは4つのプロパティを指定出来ます。
transition-duration トランジションデュレーション 変化が始まって終わるまでの時間を指定します。
transition-property トランジション・プロパティ 変化が適用されるCSSのプロパティを指定します。
transition-timing-function トランジション・タイミング・ファンクション 変化の度合いを指定します。
transition-delay トランジション・ディレイ 変化が始まる時間を指定します。


transition-timing-function

アニメーションのタイミングや進め方を指定します。
ease(初期値)
ease-in
ease-out
ease-in-out
linear


weboook.blog22.fc2.com








cssanimation.rocks






www.nxworld.net


photoshopvip.net

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ホバーアニメーション</title>
<style>
html,body,ul,li,h2,p {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
img {
  vertical-align:bottom;
}
ul {
  width:960px;
  margin:0 auto;
  overflow:hidden;
  padding:10px;
}
li {
  float:left;
  margin:10px;
  position:relative;
  cursor:pointer;
  overflow:hidden;
}
.size-l {
  width:300px;
  height:300px;
}
.size-m {
  width:300px;
  height:140px;
}
.size-s {
  width:140px;
  height:140px;
}
.cap {
  width:300px;
  height:300px;
  background:rgba(0,0,0,0.4);
  color:#FFF;
  position:absolute;
  left:0;
  top:0;
  opacity:0;
  transition:0.5s;
 
}
.cap:hover {
  opacity:1;
}
.cap2 {
  width:300px;
  height:300px;
  background:rgba(0,0,0,0.4);
  color:#FFF;
  position:absolute;
  left:0;
  top:100%;
  transition:0.2s;
}
.size-l:hover .cap2 {
  left:0;
  top:50%;
}
.cap3 {
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  color:#FFF;
  position:absolute;
  left:0;
  top:-100%;
  transition:0.2s;
}
.size-s:hover .cap3 {
  top:0;
}
.cap4 {
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  color:#FFF;
  position:absolute;
  left:100%;
  top:0;
  transition:0.2s;
}
.size-m:hover .cap4 {
  left:0;
}
</style>
</head>

<body>
<ul>
<li class="size-l"><img src="img/ph01_l.jpg" alt="">
<div class="cap">
<h2>料理名</h2>
<p>料理の説明文</p>
</div>
</li>



<li class="size-l"><img src="img/ph11_l.jpg" alt="">
<div class="cap2">
<h2>料理名2</h2>
<p>料理の説明文2</p>
</div>
</li>

<li class="size-s"><img src="img/ph27_s.jpg" alt="">
<div class="cap3">
<h2>料理名3</h2>
<p>料理の説明文3</p>
</div>

</li>
<li class="size-s"><img src="img/ph28_s.jpg" alt="">
<div class="cap3">
<h2>料理名4</h2>
<p>料理の説明文4</p>
</div>
</li>
<li class="size-m"><img src="img/ph25_my.jpg" alt="">
<div class="cap4">
<h2>料理名5</h2>
<p>料理の説明文5</p>
</div>
</li>
</ul>
</body>
</html>