<h1>CSSアニメーションの基本</h1>

<div class="element">ホバーしてみてください!</div>

<div class="page">ページをめくるアニメーション</div>
/* シンプルなホバーアニメーション */
.element {
  width: 150px;
  height: 150px;
  background-color: #3498db;
  transition: all 0.3s ease-in-out;
  margin-bottom: 20px;
}

.element:hover {
  transform: scale(1.1);
}

/* ページをめくるアニメーション */
@keyframes flip {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-180deg); }
}

.page {
  width: 150px;
  height: 150px;
  background-color: #f1c40f;
  animation: flip 1.5s ease-in-out infinite;
  transform-origin: left;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.