어쨌든 CSS 애니메이션으로 줄임표에 애니메이션을 적용 할 수 있습니까?

94

줄임표 애니메이션을 만들려고하는데 CSS 애니메이션으로 가능한지 궁금합니다 ...

그래서 아마

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

그리고 기본적으로 그렇게 계속하십시오. 어떤 아이디어?

편집 : 다음과 같이 : http://playground.magicrising.de/demo/ellipsis.html

css  css-animations 
— 레이
소스
3
애니메이션은 변환이 아니며 전환이 아닙니다. 세 가지를 혼동하지 마십시오.
— BoltClock
비슷한 질문에 내 대답을 참조하십시오 stackoverflow.com/a/24349758/282729
— feklee

답변:

89

@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 년 후에 이렇게 대답했다는 것을 의미하지만 이것은 아마도 더 낫습니다.
— Rey
3
@ xckpd7 예, 그러나 오늘 이것을 봤고 방금이 대답을 찾았습니다. 따라서 OP를위한 것이 아니라 모두를위한 리소스입니다!
— Matt Parrilla 2015
1
@MattParrilla 나는 OP이며, 내가 대답을 변경 한 것을 눈치 챘다면 나는 그 코멘트를하기 전에 이것에 동의합니다.
— Rey
10
가운데 또는 오른쪽으로 정렬 된 텍스트에 이것을 사용 하는 경우 애니메이션 중에 텍스트 이동을 원하지 않는 경우 이니셜 margin-right(또는 패딩?)을 추가 20px하고 애니메이션하는 것이 좋습니다 0px.
— Kimball
1em대신 20px이 답변에서 CSS에 대해 더 잘 작동 할 수 있습니다
— Jeevan Takhar
57

animation-delay property각 줄임표 문자와 시간 을 사용할 수 있습니다 . 이 경우 각 줄임표 문자를 a에 넣어 <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;
    }
}
— Christofer Vilander
소스
나는이 아이디어를 좋아하고 "marching elipses
— 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를 사용하면 이미지를 한 번에 클릭하고 드래그하면 드래그 할 수 없습니다. 하지만 이미지를 먼저 클릭 한 다음 클릭하여 드래그하면 드래그가 차단되지 않습니다.
— Sam Rueby 2013
2
내가 사용하는 HTML과 CSS를 조금 쥐게 <I> 태그 ... jsfiddle.net/DkcD4/77
— 아담 Youngers
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
1
애니메이션에 +1 content. 균일 한 애니메이션 리듬을 얻으려면 steps(1)하나의 추가 키 프레임을 사용 하고 정의 해야합니다 . step 함수는 키 프레임 사이의 단계 수를 지정하며 각 프레임을 지정하므로 둘 사이에 한 단계 만 필요합니다. codepen.io/anon/pen/VmEdXj
— 제프 카메라
이 솔루션의 우아함은 마음에 들지만 IE11과 (이 글을 쓰는 시점에서) Firefox는 content속성 애니메이션을 지원하지 않습니다 . (Edge에 대해 몰라요.)
— Brad Collins
@BradCollins 감사합니다! 내 대답을 편집했습니다!
— CodeBrauer
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/

편집하다

크롬에 의사 요소를 애니메이션하는 데 문제가있는 것 같습니다. 쉬운 수정은 자체 요소에 줄임표를 감싸는 것입니다. http://jsfiddle.net/MDzsR/4/ 확인

— xec
소스
Chromium에서 작동하지 않습니다 (예, 공급 업체 접두사를 -webkitfrom으로 변경했습니다 -moz).
— David는 Monica를 복원한다고 말했습니다.
@DavidThomas 당신이 맞아요-지금 크롬에서 테스트를했는데 유사 요소에 문제가있는 것 같습니다. 줄임표를 자체 요소로 감싸고 대신 (firefox에서도 작동합니다) jsfiddle.net/MDzsR/4
— xec
1
정말 좋은 솔루션이며 내가 개발중인 Firefox OS 앱에 딱 맞습니다. : 그것을 조금 불통 jsfiddle.net/feklee/x69uN
— feklee
다음은 Chrome에서 작동하고 왼쪽 정렬되지 않은 요소 (너비는 변경하지 않음)에서도 올바르게 작동하는 개선 된 버전입니다. 또한이 슬라이딩 표시 아티팩트없이 각 점을 연속적으로 표시합니다. jsfiddle.net/fze2qxsv
— 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: '...';
    }
}
— anon-e-mouse
소스
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 전용 및 웹킷 전용 키 프레임에 독점 IE 전용 필터를 추가하고 있습니다. 이미 수용된 솔루션에 비해 개선 된 점은 무엇입니까? 심지어 같은 문제가 있습니다 (프레임 4와 5에서는 5 개가 아닌 3 개의 반복 상태가있는 질문에 설명 된 것과 반대로 각각 마지막 점과 마지막 점 두
— 개만 표시됨
문제는 로딩 점을 만드는 것에 관한 것이며 필수가 아닌 가까운 예가 있습니다. 내가 추가 한 것은 접두사이므로 IE는 더 잘 인식하고 표시 할 수 있습니다.
— MRadev
3
-webkit-keyframes웹킷에만 적용되며 내부에는 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>
— repo
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.