サンプルアニメーション
四角形をクリックしてみてください。
transform
四角形にマウスをポイントしてみてください。
transition
マウス操作と無関係に、アニメーションを繰り返します。
animation
コード
コードは、サイト掲載用に一部変更してあります。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div{
display: table-cell;
font-size: 3vh;
text-align: center;
vertical-align: middle;
width: 10vw;
height: 10vw;
border: 1px black solid;
background-color: green;
color: yellow;
}
#transf:active{
/* 座標空間の変更 */
transform: rotate(45deg);
/*
matrix() 行列変換
perspective() z=0平面との間の距離を設定します。
rotate() 回転
rotateX() 水平軸を中心に回転します。
rotateY() 垂直軸を中心に回転します。
rotateZ() Z 軸を中心に回転します。
scale() 拡大縮小
scaleX() 水平に拡大または縮小します。
scaleY() 垂直に拡大または縮小します。
scaleZ() Z軸方向に拡大または縮小します。
skew() 二次元平面上で歪ませます。
skewX() 水平方向に歪ませます。
skewY() 垂直方向に歪ませます。
translate() 平行移動
translateX() 水平方向に平行移動させます。
translateY() 垂直方向に平行移動させます。
translateZ() Z軸方向に平行移動させます。
*/
}
#transi{
/* transition は、要素の 2状態間の遷移を定義 */
transition-delay: 1s; /* 遅延 */
transition-duration: 0.5s; /* 遷移時間 */
transition-property: background-color, color; /* 対象CSSプロパティ */
transition-timing-function: ease;
/*
ease 簡易な徐々
ease-in 徐々に入る
ease-out 徐々に出る
ease-in-out 徐々に出入り
linear 直線的
step-start 先頭へジャンプ
step-end 最後へジャンプ
*/
}
#transi:hover{
background-color: red;
color: white;
}
#anime{
animation-delay: 1s;/* 遅延 */
animation-direction: alternate;
/*
normal 正順
reverse 逆順
alternate 正逆交互
alternate-reverse 逆正交互
*/
animation-duration: 5s; /* 遷移時間 */
animation-fill-mode: backwards;
/*
none アニメーション実行時以外はスタイル適用無し
forwards アニメーションの最後のスタイルを保持
backwards アニメーションの最初のスタイルに戻る
both アニメーションの前(delay)と後にスタイルを保持
*/
animation-iteration-count: infinite; /* 繰り返し回数 */
animation-name: changecolor; /* @keyframes からの参照名 */
animation-play-state: running;
/*
paused 一時停止
running 再生
*/
animation-timing-function: ease;
/*
ease 簡易な徐々
ease-in 徐々に入る
ease-out 徐々に出る
ease-in-out 徐々に出入り
linear 直線的
step-start 先頭へジャンプ
step-end 最後へジャンプ
*/
}
@keyframes changecolor {
from{
background-color: blue;
}
to{
background-color: orange;
}
0%{
transform: scale(100%);
}
33%{
transform: scale(80%) rotate(-45deg);
}
66%{
transform: scale(200%) rotate(45deg);
}
100%{
transform: scale(50%);
}
}
.wrapper{
display: block;
background-color: unset;
border: 0;
margin: 5vh auto;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="transf">transform</div>
</div>
<div class="wrapper">
<div id="transi">transition</div>
</div>
<div class="wrapper">
<div id="anime">animation</div>
</div>
</body>
</html>