QA@IT

animationの設定について

2715 PV

下記のソースコードは、animationを使ってボタンの中の文字が、"2秒"かけて1往復,
及び文字色が変化するように設定したものです。
これを、1往復する時間は"0.5秒",文字色が変化する時間は"2秒"と設定するには、
どのように書き換えればいいでしょうか。ご教示ください。

<style>
#Alarmy{ 
         font-size:25px;
}

#Alarmy{ 
         -webkit-animation:Alarmy 2s ease-in-out infinite alternate; 
         -moz-animation:Alarmy 2s ease-in-out infinite alternate; 
          animation:Alarmy 2s ease-in-out infinite alternate; 
}
@-webkit-keyframes Alarmy{ 
      0% {opacity:0; transform:translateX( -8px);}
    100% {opacity:1; transform:translateX(8px); color:gold;}
}
@-moz-keyframes Alarmy{ 
      0% {opacity:0; transform:translateX( -8px);}
    100% {opacity:1;  transform:translateX(8px); color:gold;}
}
@keyframes Alarmy{ 
      0% {opacity:0; transform:translateX( -8px);}
    100% {opacity:1; transform:translateX(8px);color:gold;}
}
</style>

<button><font id="Alarmy">TTT</font></button>

回答

質問がコンパクトなのは助かりますが、提示のコードだと移動が再現できませんね。

回答ですが、キーフレームを4倍にして2秒間に4往復させて2秒かけて徐々にgoldにするか、
外側にタグを設けて往復のアニメーションと点滅のアニメーションを別のタグで行う事で実現できると思います。
前者の場合は ease-in-out だと調整が難しいかもしれません。

余談ですが fontタグはHTML5では廃止されていますので使用しない方がいいでしょう。

#Alarmy{ 
         font-size:25px;
}

#Alarmy{ 
         -webkit-animation:Alarmy 2s ease-in-out infinite alternate; 
         -moz-animation:Alarmy 2s ease-in-out infinite alternate; 
          animation:Alarmy 2s ease-in-out infinite alternate; 
}
@-webkit-keyframes Alarmy{ 
      0% {transform:translateX( -8px);}
    100% {transform:translateX(8px);}
}
@-moz-keyframes Alarmy{ 
      0% {transform:translateX( -8px);}
    100% {transform:translateX(8px);}
}
@keyframes Alarmy{ 
      0% {transform:translateX( -8px);}
    100% {transform:translateX(8px);}
}

.blink{ 
  -webkit-animation:blink-gold 0.5s ease-in-out infinite alternate; 
  -moz-animation:blink-gold 0.5s ease-in-out infinite alternate; 
  animation:blink-gold 0.5s ease-in-out infinite alternate; 
}
@-webkit-keyframes blink-gold{ 
    0% {opacity:0; }
  100% {opacity:1; color:gold;}
}
@-moz-keyframes blink-gold{ 
    0% {opacity:0; }
  100% {opacity:1; color:gold;}
}
@keyframes blink-gold{ 
    0% {opacity:0; }
  100% {opacity:1; color:gold;}
}
    <button><pre class="blink"><pre id="Alarmy">TTT</pre></pre></button>
編集 履歴 (0)
  • 回答をありがとうございました。

    質問用のコードでは、移動はできませんでしたか。IEでは、できましたが…
    往復のアニメーションと点滅のアニメーションを"id"と"class"に分けて行うことは試しましたが、うまく行きませんでした。"pre"タグを、回答のように使えば、いいわけですね。

    "font"タグも廃止されるのですか。分かりました。
    -
  • 移動ができなかったのは、width指定がないためにTTTを表示するに必要なだけしか幅をとられていないからでしょうね(移動しようにも横幅に余りがないので移動してるように見えない)。
    内側に使用するタグは必ずしもpreである必要はありません。HTMLの使用上buttonの中に入れて良いタグを適当に選んだだけです。好みで変えて構いませんよ。
    -
  • IE 11ではたしかに動きますね。Edgeだとダメですが。
    質問に使用ブラウザを添えたほうがいいでしょう。
    -
  • 詳しくありがとうございます。
    早速、活用させてもらっています。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。