求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

CSS3 - Transition[トランジションアニメーション]

Transition[トランジションアニメーション]

f:id:web-css-design:20190113210956g:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Transition</title>
<style>
html,body,h2,h3,p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
a {
  text-decoration: none;
}
body {
  text-align: center;
}
.content {
  margin: 50px;
  padding: 30px;
  border: 1px solid #aaa;
}
h2 {
  margin: 30px;
}
h3 {
  margin-bottom: 20px;
}
.btn a{
  display:block;
  width: 100px;
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px #999;
  background: #ccc;
  color: #fff;
  font-family: Helvetica, Arial, san-serif;
  font-weight: bold;
  font-size: 150%;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}

/* Transition
---------------------------*/
/*フワッと色が変わるボタン1(同時)*/
.btn01 a{
  background-color: #9c9;
  color: #fff;
  transition: 1s;
}
.btn01 a:hover{
  background-color: #fc6;
  color: #000;
}

/*フワッと色が変わるボタン2(背景色だけ)*/
.btn02 a{
  background-color: #9c9;
  transition: 0.4s;
}
.btn02 a:hover{
  background-color: #fc6;
}

/*フワッと色が変わるボタン3(時間差)*/
.btn03 a{
  background-color: #9c9;
  color: #fff;
  transition: background-color 1s 0s, color 1s 1s;
}
.btn03 a:hover{
  background-color: #fc6;
  color: #000;
}

</style>
</head>
<body>
<h2>Transition[トランジションアニメーション]</h2>

<div class="content">
<h3>フワッと色が変わるボタン1(同時)</h3>
<p class="btn btn01"><a href="#">button</a></p>
</div><!-- /.content -->

<div class="content">
<h3>フワッと色が変わるボタン2(背景色だけ)</h3>
<p class="btn btn02"><a href="#">Button</a></p>
</div><!-- /.content -->

<div class="content">
<h3>フワッと色が変わるボタン3(時間差)</h3>
<p class="btn btn03"><a href="#">BUTTON</a></p>
</div><!-- /.content -->

</body>
</html>

Transition-Timing-function(イージング)

f:id:web-css-design:20190113211348g:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Timing-function</title>
<style>
html,body,h3,p,ul,li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
.content {
  margin: 50px;
  padding: 20px;
  border: 1px solid #aaa;
}
h3 {
  margin-bottom: 20px;
}
.circle {
  width: 100px;
  height: 100px;
  margin: 20px;
  background: #197df2;
  color: #fff;
  font-weight: bold;
  text-align: center;
  line-height: 100px;
  border-radius: 50%;
}

/*transition-timing-function*/
.timing li{
  position: relative;
  left: 0;
}
.timing:hover li {
  left: 600px;
}
.t01{
  transition: left 3s ease;
}
.t02{
  transition:left 3s linear;
}
.t03{
  transition:left 3s ease-in;
}
.t04{
  transition:left 3s ease-out;
}
.t05{
  transition:left 3s ease-in-out;
}
</style>
</head>
<body>
<div class="content">
<h3>transition-timing-function</h3>
<ul class="timing">
<li class="circle t01">ease</li>
<li class="circle t02">linear</li>
<li class="circle t03">ease-in</li>
<li class="circle t04">ease-out</li>
<li class="circle t05">ease-in-out</li>
</ul>
</div>
</body>
</html>