Program Tip

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

programtip 2020. 10. 9. 12:17
반응형

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

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

그래서 아마

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

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

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

@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의 답변은 점에 슬라이드 인 효과가 더 많으며 점이 즉시 나타날 수 있습니다.

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;
    }
}

더 간단한 솔루션도 꽤 잘 작동합니다!

<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 버전에서도 작동합니다)

짧은 대답은 "정말 아님"입니다. 그러나 애니메이션 너비와 오버플로를 숨긴 상태에서 놀 수 있으며 "충분히 가까운"효과를 얻을 수 있습니다. (아래 코드는 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/ 확인

사실이 작업을 수행하는 순수한 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;
}

늦게 추가했지만 중앙 텍스트를 지원하는 방법을 찾았습니다.

<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: '...';
    }
}

여기에 순수 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>

애니메이션을 적용 할 수 있습니다 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>

참고 URL : https://stackoverflow.com/questions/13014808/is-there-anyway-to-animate-an-ellipsis-with-css-animations

반응형

'Program Tip' 카테고리의 다른 글

Git : 다른 브랜치에서 변경 사항 가져 오기  (0) 2020.10.09
관계가없는 경우 노드 반환  (0) 2020.10.09
창을 종료 할 때 실행할 작업을 예약하는 방법  (0) 2020.10.09
클래스 경로와 빌드 경로의 차이점은 무엇입니까?  (0) 2020.10.09
Xcode에서 드래그 할 수 없습니다 (코드 조각을 만들기 위해)  (0) 2020.10.09

'Program Tip'의 다른글

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

관련글

댓글

티스토리툴바