<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.