Gist
状態:-
閲覧数:2,211
投稿日: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% {プロパティ名: 値;}
}結論
アニメーション実行時間指定
・全体に対してしか適用されない