☰

CSSアニメーションで省略記号をアニメーション化する方法はありますか? 質問する

tag-icon • tag-icon css css-animations
CSSアニメーションで省略記号をアニメーション化する方法はありますか? 質問する

省略記号をアニメーション化しようとしていますが、CSS アニメーションでそれが可能かどうか疑問に思っています...

つまり、

Loading...
Loading..
Loading.
Loading...
Loading..

基本的にはそのように続けるだけです。何かアイデアはありますか?

編集: このように:http://playground.magicrising.de/demo/ellipsis.html

ベストアンサー1

少し修正したバージョンはどうでしょうか@xec の回答:http://codepen.io/thetallweeks/pen/yybGra

を使用する CSS アニメーションsteps。MDNドキュメントを参照

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 40px;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 40px;
  }
}
<h1 class="loading">Loading</h1>

@xec の回答ではドットにスライドイン効果がより多くありますが、これによりドットが瞬時に表示されます。

おすすめ記事