【覚え書き】CSS 画像をアニメーションする [回転 拡大 フェード 移動]
2022年1月 6日
CSSのアニメーションで、任意の画像を「移動」「フェード」「サイズ変更」「回転」させることができるので、ちょっとメモしておきます。
←マウスオーバーで、葉っぱの塊が移動します。キーフレームで細かく移動位置を設定すれば複雑な動きも可能です。
横揺れ、ジャンプなども表現できます。
/* CSS */
.animeMove:hover {
animation: move 1s cubic-bezier(0.0, 0.0, 1.0, 1.0) infinite;
}
@keyframes move {
0% {
transform: translate(0,0px);
}
30% {
transform: translate(50px,0px);
}
60% {
transform: translate(50px,50px);
}
100% {
transform: translate(0,0px);
}
}
.animeMove:hover {
animation: move 1s cubic-bezier(0.0, 0.0, 1.0, 1.0) infinite;
}
@keyframes move {
0% {
transform: translate(0,0px);
}
30% {
transform: translate(50px,0px);
}
60% {
transform: translate(50px,50px);
}
100% {
transform: translate(0,0px);
}
}
←マウスオーバーで、ニホンヤモリが消えます。ヤモリは「ファンデルワールス力」を利用して垂直な壁に貼りつくことが出来ます。
また、周りの環境に合わせて体色変化します。
/* CSS */
.animeFade:hover {
animation: fade 2s cubic-bezier(0.0, 0.0, 1.0, 1.0) forwards;
}
@keyframes fade {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
.animeFade:hover {
animation: fade 2s cubic-bezier(0.0, 0.0, 1.0, 1.0) forwards;
}
@keyframes fade {
0% {
opacity:1;
}
100% {
opacity:0;
}
}
←マウスオーバーで、絆創膏を拡大します。逆に縮小させることも出来ます。
/* CSS */
.animeScale:hover {
animation: scale 2s cubic-bezier(0.0, 0.0, 1.0, 1.0) forwards;
}
@keyframes scale {
0% {
transform: scale(100%, 100%);
}
100% {
transform: scale(200%, 200%);
}
}
.animeScale:hover {
animation: scale 2s cubic-bezier(0.0, 0.0, 1.0, 1.0) forwards;
}
@keyframes scale {
0% {
transform: scale(100%, 100%);
}
100% {
transform: scale(200%, 200%);
}
}
←マウスオーバーで、風見鶏が回転します。設定は右回転ですが、ジーと見ていれば念力で左回転させることも可能です。
/* CSS */
.animeFlip:hover {
animation: flip 1s cubic-bezier(0.0, 0.0, 1.0, 1.0) infinite;
}
@keyframes flip {
0% {
}
100% {
transform: rotate3d(0, 1, 0, -360deg);
}
}
.animeFlip:hover {
animation: flip 1s cubic-bezier(0.0, 0.0, 1.0, 1.0) infinite;
}
@keyframes flip {
0% {
}
100% {
transform: rotate3d(0, 1, 0, -360deg);
}
}
←マウスオーバーで、矢印が回転します。色々応用ができそうです。
/* CSS */
.animeRotate:hover {
animation: rotate 1.5s cubic-bezier(0.0, 0.0, 1.0, 1.0) infinite;
}
@keyframes rotate {
0% {
}
100% {
transform: rotate3d(0, 0, 1, -360deg);
}
}
.animeRotate:hover {
animation: rotate 1.5s cubic-bezier(0.0, 0.0, 1.0, 1.0) infinite;
}
@keyframes rotate {
0% {
}
100% {
transform: rotate3d(0, 0, 1, -360deg);
}
}
animation: ショートハンド。以下のプロパティの値を記述できる。
animation-name: アニメーションの名前。キーフレームを設定する。
animation-duration: 1回のアニメーションの周期にかかる時間。秒 (s) またはミリ秒 (ms)
animation-timing-function: アニメーションの動くタイミング。cubic-bezier(0.0, 0.0, 1.0, 1.0)は等速。
animation-delay: アニメーションを始める時間。秒 (s) またはミリ秒 (ms)
animation-direction: アニメーションの向き。reverse(逆方向) alternate(順方向と逆方向を交互に)
animation-iteration-count: アニメーションの再生数。infinite(無限)
animation-fill-mode: (エンドレスで無い時)保持するキーフレーム。forwards(最後のキーフレーム) backwards(最初のキーフレーム) both(両方)
animation-play-state: アニメーションの実行と停止。paused(停止) running(実行)
animation-name: アニメーションの名前。キーフレームを設定する。
animation-duration: 1回のアニメーションの周期にかかる時間。秒 (s) またはミリ秒 (ms)
animation-timing-function: アニメーションの動くタイミング。cubic-bezier(0.0, 0.0, 1.0, 1.0)は等速。
animation-delay: アニメーションを始める時間。秒 (s) またはミリ秒 (ms)
animation-direction: アニメーションの向き。reverse(逆方向) alternate(順方向と逆方向を交互に)
animation-iteration-count: アニメーションの再生数。infinite(無限)
animation-fill-mode: (エンドレスで無い時)保持するキーフレーム。forwards(最後のキーフレーム) backwards(最初のキーフレーム) both(両方)
animation-play-state: アニメーションの実行と停止。paused(停止) running(実行)
おすすめ記事
JavaScriptを有効にしているのに「JavaScriptを有効にして下さい」と言われる
パソコン版インスタグラムで、サブアカウントの追加・登録のやりかた・しかた
「暗号化辞書が正しくありません」で、pdfファイルが読めない
『nanaco』のポイント交換を計算・表示するスクリプト
Sti_Trace.logを削除するとどうなる？
Adobe Flash Playerをアップデートしよう
【覚え書き】CSS 画像をアニメーションする [回転 拡大 フェード 移動]
簡単なCSSとJavascriptでクリックで画像拡大(同一ページにある複数の画像対応)
マザーボードのBIOS更新(アップデート)
ウィンドウズXPの不審なフォルダ『\Program Files\Xerox\nwwia』
JavaScriptを有効にしているのに「JavaScriptを有効にして下さい」と言われる
パソコン版インスタグラムで、サブアカウントの追加・登録のやりかた・しかた
「暗号化辞書が正しくありません」で、pdfファイルが読めない
『nanaco』のポイント交換を計算・表示するスクリプト
Sti_Trace.logを削除するとどうなる？
Adobe Flash Playerをアップデートしよう
【覚え書き】CSS 画像をアニメーションする [回転 拡大 フェード 移動]
簡単なCSSとJavascriptでクリックで画像拡大(同一ページにある複数の画像対応)
マザーボードのBIOS更新(アップデート)
ウィンドウズXPの不審なフォルダ『\Program Files\Xerox\nwwia』