HTMLとCSSで表示された文字を点滅させたいのですが、上手く出来ないのでご教授お願いします。

Question

Railsでアプリを作成しております。
ブラウザに表示された文字をHTMLとCSSで点滅表示させたいにですが上手く出来ないのでご教授お願いします。コードは以下のようにしています。

表示された「決定！」という文字を点滅させたいのです。

index.html.erb

<span class="blinking">
  <td><font size="6" color="deeppink">決定！</font></td>
</span>

css

/* 点滅 */
.blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

このようにしています。（サイトのコピペなのですが・・・）

このやり方に固執している訳ではないので他にいい方法などがあればあわせてご教授お願いしていただけませんでしょうか？
宜しくお願いします。

Comments

[m.ts10806]

今のコードではどのようになっているのでしょうか

[m.ts10806]

というか、spanの中にtdはhtml的にアウトかと。fontタグはhtml5ではそもそも廃止されていますし。本当にこう組んでいますか？

[mikkame]

https://jsfiddle.net/mLze819f/

できてるやん・・・

Answer 1

上記に書かれているコードでは、class="blinking"のつけるところを直せば動くかと思います！

<span>
  <td><font class="blinking" size="6" color="deeppink">決定！</font></td>
</span>

アニメーションの方法は、とりあえずたくさんあるので、、、
とりあえず参考リンク貼らせていただきます！
https://qiita.com/junya/items/7c92ea0ac4a41d867dbb

Comments

[koume]

回答ありがとうございます。<td>の記述位置が悪さしていました。
点滅表示できました。本当に助かりました。
今後とも宜しくお願いします。

[kiddayo]

よかったです！
ありがとうございます！
こちらこそ今後ともよろしくお願いいたしますー！