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

92

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

だからそれは

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

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

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

css  css-animations 
— レイ
ソース
3
アニメーションは変換ではなく、遷移ではありません。3つを混同しないでください。
— –BoltClock
同様の質問に対する私の答えを参照してください：stackoverflow.com/a/24349758/282729
— feklee 2014年

回答:

88

@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の回答は、ドットに対してより多くのスライドイン効果をもたらしますが、これにより、ドットが即座に表示されます。

— thetallweeks
ソース
1
3年後のように答えたということですが、おそらくもっと良いでしょう。
— レイ
3
@ xckpd7はい、しかし私は今日これをグーグルで検索し、ちょうどこの答えを見つけました。SOは、OPだけでなく、すべての人のためのリソースです。
— Matt Parrilla 2015
1
@MattParrilla私はOPです。気付いた場合は、コメントする前に、受け入れる回答をこれに変更しました。
— レイ
10
中央揃えまたは右揃えのテキストでこれを使用している場合、アニメーション中にテキストをシフトさせたくない場合margin-rightは、のイニシャル（またはパディング？）を追加して20pxアニメーション化することを0pxお勧めします。
— キンボール
1emの代わりに20px、この回答のCSSの方がうまくいく可能性があります
— Jeevan Takhar
56

animation-delay property各省略記号のandtimeを使用してみることができます。この場合、各省略記号をに入れ<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;
    }
}
— クリストファー・ヴィランダー
ソース
私はこのアイデアが好きで、「マーチングエリプス」を表示するために少し拡張しました：jsfiddle.net/toddwprice/cRLMw
— Todd Price
動作しなかった（？）ので、display：inline;を追加しました。そしてドット。これはそれが機能することを意図した方法ですか？jsfiddle.net/cRLMw/3
— Christofer Vilander
4
申し訳ありませんが@ Christofer-更新されたフィドルを保存するのを忘れました。ここに再びあります：jsfiddle.net/toddwprice/cRLMw/8 また、ここにいくつかの興味深いCSSアニメーションがある私が今読んだ記事があります ： tympanus.net/Tutorials/LoadingAnimations/index4.html
— Todd Price
Firefoxを使用していると、画像をクリックして1回のショットでドラッグすると、ドラッグできません。しかし、最初に画像をクリックしてからクリックしてドラッグしても、ドラッグが妨げられることはありません。
— Sam Rueby 2013年
2
<i>タグを使用するためにHTMLとCSSを少し調整しました... jsfiddle.net/DkcD4/77
— Adam
32

さらに単純な解決策は、かなりうまく機能します！

<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ます。

https://www.w3.org/TR/css3-transitions/#animatable-css

つまり、これはWebKit / Blink / Electronのみのソリューションです。（ただし、現在のFFバージョンでも機能します）

— CodeBrauer
ソース
私は先週このスレッドを見ていました。簡単な答えです。
— r8n5n 2016
1
アニメーションの場合は+1 content。アニメーションのリズムを均一にするには、steps(1)1つの追加のキーフレームを使用して定義する必要があります。step関数は、キーフレーム間のステップ数を指定します。各フレームを指定しているため、フレーム間に1つのステップが必要です。codepen.io/anon/pen/VmEdXj
— ジェフカメラ
私はこのソリューションの優雅さを気に入っていますが、IE11と（この記事の執筆時点では）Firefoxはcontentプロパティのアニメーション化をサポートしていないことに注意してください。（エッジについては知らない。）
— ブラッドコリンズ
@BradCollinsありがとうございます！答えを編集しました！
— codeBrauer 2017
15

簡単な答えは「そうではない」です。ただし、アニメーションの幅とオーバーフローを非表示にして遊んだり、「十分に近い」効果を得ることができます。（以下のコードは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/

編集

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

— xec
ソース
Chromiumで動作していません（はい、ベンダープレフィックスを-webkitからに変更しました-moz）。
— デビッドは、モニカ
あなたが正しい@ DavidThomas-現在Chromeでテストされており、疑似要素に問題があるようです。省略記号を独自の要素でラップし、代わりにアニメーション化することができます（Firefoxでも機能します）jsfiddle.net/MDzsR/4
— xec
1
本当に素晴らしいソリューションであり、私が開発しているFirefoxOSアプリにぴったりです。少し調整しました
— feklee
これは、Chromeで動作するだけでなく、左揃えでない要素でも正しく動作する改良版です（幅は変更されません）。また、このスライドによってアーティファクトが明らかになることなく、各ドットが連続して表示されます。jsfiddle.net
— Aayla Secura
@AaylaSecura受け入れられた回答には、代わりに手順を使用したよりクリーンなソリューションがありますstackoverflow.com/a/28074607/833146
— xec
3

遅い追加ですが、中央揃えのテキストをサポートするこれを行う方法を見つけました。

<element>:after {
    content: '\00a0\00a0\00a0';
    animation: progress-ellipsis 5s infinite;
}

@keyframes progress-ellipsis {
    0% {
        content: '\00a0\00a0\00a0';
    }
    30% {
        content: '.\00a0\00a0';
    }
    60% {
        content: '..\00a0';
    }
    90% {
        content: '...';
    }
}
— アノン・E・マウス
ソース
3

アニメーション化できますclip（clip-pathIEのサポートが必要ない場合はもっと良いです） 

div {
  position: relative;
  display: inline-block;
  font-size: 1.4rem;
}

div:after {
  position: absolute;
  margin-left: .1rem;
  content: ' ...';
  display: inline-block;
  animation: loading steps(4) 2s infinite;
  clip: rect(auto, 0px, auto, auto);
}

@keyframes loading {
  to {
    clip: rect(auto, 20px, auto, auto);
  }
}
<div>Loading</div>
スニペットを展開

— ヤコブE
ソース
1

実際、これを行うには純粋なCSSの方法があります。

CSS Tricksから例を取得しましたが、Internet Explorerでもサポートされるようにしました（10以上でテストしました）。

デモを確認してください：http：//jsfiddle.net/Roobyx/AT6v6/2/

HTML：

<h4 id="searching-ellipsis"> Searching
    <span>.</span>
    <span>.</span>
    <span>.</span>
</h4>

CSS：

@-webkit-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-moz-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }

  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-webkit-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-moz-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@-o-keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}

@keyframes opacity {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
  }
  100% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
}
#searching-ellipsis span {
  -webkit-animation-name: opacity;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: opacity;
  -moz-animation-duration: 1s;
  -moz-animation-iteration-count: infinite;
  -ms-animation-name: opacity;
  -ms-animation-duration: 1s;
  -ms-animation-iteration-count: infinite;
}
#searching-ellipsis span:nth-child(2) {
  -webkit-animation-delay: 100ms;
  -moz-animation-delay: 100ms;
  -ms-animation-delay: 100ms;
  -o-animation-delay: 100ms;
  animation-delay: 100ms;
}
#searching-ellipsis span:nth-child(3) {
  -webkit-animation-delay: 300ms;
  -moz-animation-delay: 300ms;
  -ms-animation-delay: 300ms;
  -o-animation-delay: 300ms;
  animation-delay: 300ms;
}
— MRadev
ソース
mozilla固有およびWebkit固有のキーフレームに独自のIEのみのフィルターを追加しています。これは、すでに受け入れられているソリューションをどのように改善していますか？同じ問題もあります（フレーム4と5では、5
— つで
問題はローディングドットの作成に関するものであり、必須ではなく、ほんの近い例があります。私が追加したのはプレフィックスなので、IEはそれをよりよく認識して表示できます。
— MRadev 2014年
3
-webkit-keyframesWebkitにのみ適用され、内部にはIEのみのコードがあります。このコードはスペースを無駄にするだけです。
— xec 2014年
0

これが純粋なcssを使用した私のソリューションですhttps://jsfiddle.net/pduc6jx5/1/ 説明：https：//medium.com/@lastseeds/create-text-ellipsis-animation-with-pure-css-7f61acee69cc

scss



.dot1 {
 animation: visibility 3s linear infinite;
}

@keyframes visibility {
 0% {
 opacity: 1;
 }
 65% {
 opacity: 1;
 }
 66% {
 opacity: 0;
 }
 100% {
 opacity: 0;
 }
}

.dot2 {
 animation: visibility2 3s linear infinite;
}

@keyframes visibility2 {
 0% {
  opacity: 0;
 }
 21% {
  opacity: 0;
 }
 22% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

.dot3 {
 animation: visibility3 3s linear infinite;
}

@keyframes visibility3 {
 0% {
  opacity: 0;
 }
 43% {
  opacity: 0;
 }
 44% {
  opacity: 1;
 }
 65% {
  opacity: 1;
 }
 66% {
  opacity: 0;
 }
 100% {
  opacity: 0;
 }
}

html

Loading <span class="dot dot1">.</span><span class="dot dot2">.</span><span class="dot dot3">.</span>
— レポ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.