108

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

だからそれは好きかもしれません

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

そして、基本的にはそのまま続けます。何か案は？

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

4

8 に答える 8

108

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

HTML

要素に追加された単一のクラス:

<div class="loading">Loading</div>

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: 20px;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 20px;    
  }
}

@xecの答えは、ドットにスライドイン効果をもたらしますが、これによりドットが即座に表示されます。

于 2015-01-21T18:49:55.077 に答える
61

animation-delay property各省略記号文字と時間を使用してみることができます。この場合、各省略記号文字を に入れ、<span class>個別にアニメーション化できるようにしました。

私はデモを作成しましたが、これは完璧ではありませんが、少なくとも私が意味することを示しています:)

私の例のコード:

HTML

Loading<span class="one">.</span><span class="two">.</span><span class="three">.</span>​

CSS

.one {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.0s;
    animation: dot 1.3s infinite;
    animation-delay: 0.0s;
}

.two {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.2s;
    animation: dot 1.3s infinite;
    animation-delay: 0.2s;
}

.three {
    opacity: 0;
    -webkit-animation: dot 1.3s infinite;
    -webkit-animation-delay: 0.3s;
    animation: dot 1.3s infinite;
    animation-delay: 0.3s;
}

@-webkit-keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes dot {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
于 2012-10-22T18:12:09.977 に答える
44

より単純なソリューションでさえ、かなりうまく機能します!

<style>
    .loading::after {
      display: inline-block;
      animation: dotty steps(1,end) 1s infinite;
      content: '';
    }
    
    @keyframes dotty {
        0%   { content: ''; }
        25%  { content: '.'; }
        50%  { content: '..'; }
        75%  { content: '...'; }
        100% { content: ''; }
    }
</style>
<div class="loading">Loading</div>

一部のドットを非表示にする代わりに、コンテンツをアニメーションで編集しただけです...

デモはこちら: https://jsfiddle.net/f6vhway2/1/

編集：アニメーション化可能なプロパティではないことを指摘してくれた@BradCollinsに 感謝します。content

現在 (2021 年)、これは Chrome/WebKit/Blink/Electron と Firefox および新しいバージョンの Edge で動作します。

于 2016-12-06T09:08:03.270 に答える
18

短い答えは「そうではない」です。ただし、アニメーション幅とオーバーフローを非表示にしていじってみると、「十分に近い」効果が得られる可能性があります。(以下のコードは Firefox 専用に調整されています。必要に応じてベンダー プレフィックスを追加してください)。

html

<div class="loading">Loading</div>

CSS

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -moz-animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@-moz-keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

デモ: http://jsfiddle.net/MDzsR/1/

編集

クロムには、疑似要素のアニメーション化に問題があるようです。簡単な修正は、省略記号を独自の要素でラップすることです。http://jsfiddle.net/MDzsR/4/をチェックしてください

于 2012-10-22T15:49:00.083 に答える