CSSでアハ体験

この記事を三行にまとめると

画像を変化させるアニメーション
HTMLを変化させるアニメーション
アハッ☆(´Д｀*)

この記事は以下の動画の中に出てきたサンプルコードを載せたものです。コピペなどが必要なときに使ってください。

画像を変化させるアハ体験

HTML

<div class="container">
  <img src="before.png" alt="変化前" id="before">
  <img src="image2.png" alt="変化後" id="after">
</div>
<button type="button" id="start">START</button>

JavaScript

start = document.getElementById('start');
start.onclick = function() {
  after = document.getElementById('after');
  after.classList.add('fade');
}

CSS

.container {
  margin: 20px auto;
  width: 640px;
  height: 360px;
  position: relative;
}

img { 
  position: absolute;
}

#image2 {
  opacity: 0;
}

.fade {
  animation: fadeIn 5s forwards;
}

@keyframes fadeIn {
  from { opacity: 0 }
  to { opacity: 1 }
}

#start {
  display: block;
  margin: 0 auto;
  width: 640px;
  padding: 5px;
  font-size: 24px;
  border: solid 1px;
  cursor: pointer;
}

#start:active {
  background: #ddd;
}

HTMLを変化させるアハ体験

HTML

<div class="container">
  <p id="logo">あかつき<span id="no">の</span>お宿</p>
</div>
<button type="button" id="start">START</button>

JavaScript

start = document.getElementById('start');
start.onclick = function() {
  logo = document.getElementById('logo');
  no = document.getElementById('no');

  logo.classList.add('fade');
  no.classList.add('rotate');
  start.classList.add('radius');
}

CSS

.container {
  margin: 20px auto;
  width: 620px;
}

#logo {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  height: 180px;
  font-size: 72px;
  color: #fff;
  box-shadow: 0px 0px 0px 10px #0068b7;
  background: #0068b7;
  border: dashed 4px #fff;
}

//ボーダーの上を消すアニメーション
.fade {
  animation: fade 10s forwards;
}

@keyframes fade {
  from { border-top-color: #fff }
  to { border-top-color: #0068b7 }
}

//「の」の字を回転させるアニメーション
.rotate {
  animation: rotate 10s forwards;
}

@keyframes rotate {
  from { transform: rotate(0) }
  to { transform: rotate(90deg) }
}  

#start {
  width: 640px;
  padding: 5px;
  font-size: 24px;
  border: solid 1px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

#start:active {
  background: #ddd;
}

//ボタンの左上を角丸にするアニメーション
.radius {
  animation: radius 10s forwards;
}

@keyframes radius {
  from { border-top-left-radius: 0px }
  to { border-top-left-radius: 10px }
}