アニメーション - transition

transition(トランジションアニメーション)

  • transition は、「:hover」などの動作をきっかけとして、アニメーションでプロパティの値を変化させることができるプロパティです

f:id:web-css-design:20161230135311p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>トランジションアニメーション</title>
<style>
ul {
  list-style: none;
}
.timing>li {
  position:relative;
  left:0;
  width: 160px;
  margin-bottom: 10px;
  background: #9C9;
  line-height: 40px;
  text-align: center;
  font-family: "Arial Black", sans-serif;
  font-size: 16px;
  color: #FFF;
  text-shadow: 0 0 3px #000;
}
.timing:hover li{
  left:400px;
}
.t01{ transition: 3s ease; }
.t02{ transition: 3s left linear; }
.t03{ transition: 3s ease-in; }
.t04{ transition: 3s left ease-out;}
.t05{ transition: 3s left ease-in-out;}
</style>
</head>
<body>
<section>
<h3>transition-timing-function</h3>
<ul class="timing">
<li class="t01">ease</li>
<li class="t02">linear</li>
<li class="t03">ease-in</li>
<li class="t04">ease-out</li>
<li class="t05">ease-in-out</li>
</ul>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マウスオーバーで色が変化するアニメ-ション</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background: #2293F6;
  text-align: center;
  line-height: 100px;
  font-family: "Arial Black", sans-serif;
  color: #FFF;
}
.box:hover {
  background: #F5F500;
  transition: 1s;
}
</style>
</head>
<body>
<div class="box">hover</div>
</body>
</html>

tympanus.net


tympanus.net

広告を非表示にする

求職者支援訓練 フェリカテクニカルアカデミー