web-dev-qa-db-ja.com

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

私はEllipsisのアニメーションを作ろうとしていますが、CSSアニメーションで可能かどうか疑問に思っていました...

だからそれは

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

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

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

csscss3css-animations
78
Rey

@ xec's answer のわずかに変更されたバージョンはどうですか？ 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の答えは、ドットに対してより多くのスライドイン効果がありますが、これにより、ドットが即座に表示されます。

71
thetallweeks

animation-delay propertyを使用して、各省略記号の時間を計ることができます。この場合、それぞれのEllipsis文字を<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;
    }
}
52
Christofer Vilander

より単純なソリューションでさえ、かなりうまくいきます！

<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/

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

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

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

27
CodeBrauer

短い答えは「本当にない」です。ただし、アニメーション幅とオーバーフローを非表示にしていじることができ、おそらく「十分に近い」効果を得ることができます。 （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 /

16
xec

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

<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: '...';
    }
}
1
anon-e-mouse

実は、これを行うための純粋な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;
}
1
MRadev

ここに純粋な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>
0
repo

clip（またはそれ以上のclip-path必要ない場合IEサポート）

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>
0
Jakob E