Initial Site

Initial Site

Initial Site

CSS3 アニメーション firefox動かない にハマった件

  • ササキ  2015/03/10 12:36
はまくま

はまくま

いまさらですが、css3でアニメーションだぁ!って思って最近勉強しております。

googleさんに聞くと色々方法でてくるのでとりあえず、やってみてすんなり動いたのです

が、

開発するときに自分はGoogle Chrome を使っているので firefoxで動いてなかったことに気がつかなったのであります。

下記、二度と同じとこでハマらないようにメモです。

ハマったところは ここだぁ!!!(時間無いので、端的すぎるほど端的にかいてしまいます)

animation: colorchange 5 ease 0 infinite normal; -moz-animation: colorchange 5s ease 0 infinite normal; ↓ 直したところ 
animation: colorchange 5 ease 0 infinite normal; -moz-animation: colorchange 5s ease 0s infinite normal; ■説明 ほんと些細なことですが、 animateion-durationの値に「0」と指定すると動かない → animateion-durationの値を「0s」と変更する
が無い だけでした 番外編 ■mixiin作ってみた  用途はCSS背景を 同じclsss名で埋め込む // 背景アニメーション画像の一括登録 /* flile名と   class名は同じ */ $GLOBAL_LIST: area1_body area1_left_arm ;// ここにclass名(=背景画像ファイル名)をスペース区切りで入力 $arg: null; @mixin list_animation_bg() { @each $bgimage in $GLOBAL_LIST { $arg: $bgimage; @content; } } @include list_animation_bg() { .#{$arg} { background-image: url('画像の格納先/#{$arg}.png');// class名と同じ前提 } } もう一つ  アニメーション キーフレームの指定 と プレフィックス処理 @mixin keyframes($animation-name) { @-webkit-keyframes $animation-name { @content; } @-moz-keyframes $animation-name { @content; } @keyframes $animation-name { @content; } } @mixin animation($animation-name) { -webkit-animation: $animation-name; -moz-animation: $animation-name; -o-animation: $animation-name; -ms-animation: $animation-name; animation: $animation-name; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; animation-fill-mode: both; } // 基準点の設定 @mixin origin($xy) { -moz-transform-origin:$xy; -webkit-transform-origin:$xy; -o-transform-origin:$xy; -ms-transform-origin:$xy; }  入力例 @include animation( area1_left_head_anime 1.2s ease 0s infinite);// 0s → sは必ずつける 今回ハマったところ! @include origin( 10px 50px ); 

コメントをどうぞ

技術の記事

  1. 2
    photoshopで簡単な加工からそれなりに綺麗にする方法
  2. pixta_4153512_M
    夏バテ気味のようです。
  3. CropperCapture1
    【ターゲットブランク】target=_blankなのか。target=blankなのか。それとも、target=newなのか。WEB屋のメモ帳
  4. lgi01a201404292200
    プログラマは稼げるのか?

おすすめ記事

  1. イニシャルサイトコーポレートサイト
    コーポレートサイトをリニューアルしました
  2. なんでもQ
    相談Q&Aサイト「なんでもQ」開発中です!
  3. さんぽすフォトコンペ開催中
    今年もさんぽすフォトコンペ開催しました!

人気の記事

  1. ファミコン
    パズドラ、モンスト、白猫に続く次のゲームは…?
  2. konagaya_20150303
    日常でつい使ってしまう間違えやすい日本語
  3. konagaya20150513
    初心者でも気軽に登れて絶景が見れる山
  4. BBQ
    グループ会社合同フットサル&バーベキュー大会に参加しました(BBQ編)