Gist
状態:-
閲覧数:2,181
投稿日:2015-01-15
更新日:2015-01-16
「CSSキーフレームアニメーション」実行後のCSS設定
・案1.animation-fill-mode:forwards;
・案2.キーフレームアニメーション内で指定するのではなく、普通にCSSで指定
「画像マウスオーバー」時の「キーフレームアニメーション」内容
・画像を1回転させ2.5倍に拡大
キーフレームアニメーション実行後のCSS指定
・画像を1回転させ2.5倍に拡大させた後は、どう表示するの？
animation-fill-modeで指定
問題点
・この指定をすると、マウスアウトした際のtransition効果が効かない
・理由不明
通常CSSで指定
問題点
・この指定をすると、マウスアウトした際のtransition効果は効くが、マウスアウトした瞬間、若干位置がズレる
・理由不明
・案1.animation-fill-mode:forwards;
・案2.キーフレームアニメーション内で指定するのではなく、普通にCSSで指定
例A
「画像マウスオーバー」時の「キーフレームアニメーション」内容
・画像を1回転させ2.5倍に拡大
.ターゲットクラス名 img:hover{ animation-name: opaAnim,transAnim; animation-iteration-count: 1 ; animation-timing-function: linear; animation-duration: 8s; |
キーフレームアニメーション実行後のCSS指定
・画像を1回転させ2.5倍に拡大させた後は、どう表示するの？
案1
animation-fill-modeで指定
.ターゲットクラス名 img:hover{ animation-fill-mode:forwards; |
問題点
・この指定をすると、マウスアウトした際のtransition効果が効かない
・理由不明
.ターゲットクラス名 img { /* transition プロパティの指定 */ transition: all 5.5s ease-in-out; |
案2
通常CSSで指定
/* アニメーション実行後の状態の CSS の設定 */.ターゲットクラス名 img:hover{ transform: rotate(360deg) scale(2.5);} |
問題点
・この指定をすると、マウスアウトした際のtransition効果は効くが、マウスアウトした瞬間、若干位置がズレる
・理由不明
CSS3キーフレームアニメーションで%毎の時間指定は出来ない
仕様
仕様で定義されている以上のことは不可
・一見すると何でも出来そうな「CSS3キーフレームアニメーション」
・しかし、仕様で定義されている以上のことは当然出来ない
基本的な考え方
1.任意のキーフレームアニメーション名を指定
@keyframes 任意のキーフレーム名; |
2.指定した「キーフレームアニメーション」全体を実行する秒数を指定
animation-duration: 秒数s; |
3.指定した「キーフレームアニメーション」実行内容を、進捗度%で指定
※ここで「animation-duration: 秒数s;」を指定することは出来ない
@keyframes 任意のキーフレーム名 { 0% {プロパティ名: 値;} 50% {プロパティ名: 値;} 70% {プロパティ名: 値;} 90% {プロパティ名: 値;} 100% {プロパティ名: 値;}} |
結論
アニメーション実行時間指定
・全体に対してしか適用されない