CSS3で作るホバーアニメーション（１）

CSS3で作るマウスオーバーアニメーション

背景色が変化するアニメーション

f:id:web-0818:20170108024751p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>背景色が変化するアニメーション</title>
<style>
html,body, h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
a { text-decoration: none; }

.content {
  margin: 100px;
}
h1 {
  margin-bottom: 20px;
  font-size: 20px;
  color: #666;
}
li {
  float: left;
}
li>a {
  display: block;
  width: 160px;
  background-color: #fff;
  float: left;
  line-height: 40px;
  text-align: center;
  color: #333;
  border: 1px solid #999;
  border-left: 0;
  box-sizing: border-box;
  background: #FFF;
  transition: all 1s ease;
}
li:first-child>a {
  border-left: 1px solid #999;
}
#nav>li>a:hover {
  background: #DDA32F;
  color: #FFF;
}
</style>
</head>
<body>
<div class="content"> 
<h1>背景色が変化するアニメーション</h1> 
<ul id="nav"> 
<li><a href="#">HOME</a></li> 
<li><a href="#">ABOUT</a></li> 
<li><a href="#">GALLERY</a></li> 
<li><a href="#">LINK</a></li> 
</ul> 
</div> 
</body>
</html>
横からスライドするアニメーション

f:id:web-0818:20170108102157p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>横からスライドするアニメーション</title>
<style>
html, body, h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.content {
  margin: 100px;
}
h1 {
  margin-bottom: 20px;
  font-size: 20px;
  color: #666;
}
ul {
  overflow: hidden;
}
.c1>a {
  background-color: #FF9933;
}
.c2>a {
  background-color: #00CCFF;
}
.c3>a {
  background-color: #33CC66;
}
.c4>a {
  background-color: #FF84D7;
}
#nav {
  margin-left: -20px;
}
#nav>li {
  margin-bottom: 10px;
}
#nav>li>a {
  display: block;
  width: 260px;
  margin-left: -100px;
  padding-right: 30px;
  line-height: 30px;
  font-weight: bold;
  color: #FFF;
  text-align: right;
  -webkit-border-top-right-radius: 30px;
  -webkit-border-bottom-right-radius: 30px;
  -moz-border-radius-topright: 30px;
  -moz-border-radius-bottomright: 30px;
  -o-border-radius-topright: 30px;
  -o-border-radius-bottomright: 30px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}
#nav>li>a:hover {
  margin-left: 0;
}
</style>
</head>
<body>
<div class="content">
<h1>横からスライドするアニメーション</h1>
<ul id="nav">
<li class="c1"><a href="#">HOME</a></li>
<li class="c2"><a href="#">ABOUT</a></li>
<li class="c3"><a href="#">GALLERY</a></li>
<li class="c4"><a href="#">LINK</a></li>
</ul>
</div>
</body>
</html>
拡大・縮小するアニメーション

f:id:web-0818:20170108112914p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>拡大・縮小するアニメーション</title>
<style>
html, body, h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family: "Hiragino Kaku Gothic ProN",  Meiryo,  sans-serif;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
}
.content {
  margin: 100px;
}
h1 {
  margin-bottom: 20px;
  font-size: 20px;
  color: #666;
}
.c1>a {
  background-color: #FF9933;
}
.c2>a {
  background-color: #00CCFF;
}
.c3>a {
  background-color: #33CC66;
}
.c4>a {
  background-color: #FF84D7;
}
#nav>li {
  float: left;
  margin-right: 30px;
  text-align: center;
  transition: all 0.5s ease;
}
#nav>li:hover {
  transform: scale( 1.5 );
}
#nav>li>a {
  display: table-cell;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  color: #FFF;
}
</style>
</head>
<body>
<div class="content">
<h1>拡大・縮小するアニメーション</h1>
<ul id="nav">
<li class="c1"><a href="#">HOME</a></li>
<li class="c2"><a href="#">ABOUT</a></li>
<li class="c3"><a href="#">GALLERY</a></li>
<li class="c4"><a href="#">LINK</a></li>
</ul>
</div>
</body>
</html>