Có cách nào để tạo hiệu ứng cho một dấu chấm lửng bằng hoạt ảnh CSS không?

92

Tôi đang cố tạo hoạt ảnh dấu chấm lửng và tự hỏi liệu có khả thi với hoạt ảnh CSS ...

Vì vậy, nó có thể giống như

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

Và về cơ bản thì cứ tiếp tục như vậy. Có ý kiến ​​gì không?

Chỉnh sửa: như thế này: http://playground.magicaging.de/demo/ellipsis.html

css  css-animations 
— Rey
nguồn
3
Hoạt ảnh không phải là biến đổi không phải là chuyển tiếp. Xin đừng để ba người trong số họ lẫn lộn.
— BoltClock
Xem câu trả lời của tôi cho một câu hỏi tương tự: stackoverflow.com/a/24349758/282729
— feklee

Câu trả lời:

88

Làm thế nào về một phiên bản sửa đổi một chút của câu trả lời của @ xec : http://codepen.io/thetallweeks/pen/yybGra

HTML

Một lớp duy nhất được thêm vào phần tử:

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

CSS

Hoạt ảnh sử dụng steps. Xem tài liệu 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;    
  }
}

Câu trả lời của @ xec có nhiều hiệu ứng trượt hơn trên các dấu chấm, trong khi điều này cho phép các dấu chấm xuất hiện ngay lập tức.

— thetallweeks
nguồn
1
Ý tôi là bạn đã trả lời câu này như 3 năm sau nhưng điều này có lẽ tốt hơn.
— Rey
3
@ xckpd7 yea, nhưng tôi đã tìm kiếm câu trả lời này hôm nay và chỉ tìm thấy câu trả lời này. VÌ VẬY không chỉ dành cho OP, nó là tài nguyên cho tất cả!
— Matt Parrilla
1
@MattParrilla Tôi là OP, và nếu bạn nhận thấy, tôi đã thay đổi câu trả lời, tôi chấp nhận câu trả lời này trước khi đưa ra nhận xét đó.
— Rey
10
Nếu bạn đang sử dụng tính năng này trên văn bản được căn giữa hoặc căn phải, tôi khuyên bạn nên thêm tên viết margin-righttắt (hoặc phần đệm?) 20pxVà tạo hiệu ứng cho nó 0pxnếu bạn không muốn văn bản của mình thay đổi trong quá trình hoạt ảnh.
— Kimball
1emthay vì 20pxcó thể hoạt động tốt hơn cho CSS trong câu trả lời này
— Jeevan Takhar
56

Bạn có thể thử sử dụng animation-delay propertythời gian và dấu chấm lửng cho mỗi ký tự. Trong trường hợp này, tôi đã đặt từng ký tự dấu chấm lửng trong một <span class>để tôi có thể tạo hiệu ứng riêng cho chúng.

Tôi đã tạo một bản demo , nó không hoàn hảo, nhưng nó cho thấy ít nhất những gì tôi muốn nói :)

Mã từ ví dụ của tôi:

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
nguồn
Tôi thích ý tưởng này và chỉ mở rộng nó một chút để hiển thị "nhật thực diễu hành": jsfiddle.net/toddwprice/cRLMw
— Giá Todd
Nó không hoạt động (?), Vì vậy tôi đã thêm display: inline; và sau đó là các dấu chấm. Đây có phải là cách nó hoạt động không? jsfiddle.net/cRLMw/3
— Christofer Vilander
4
Xin lỗi @Christofer - quên lưu fiddle cập nhật của tôi. Đây là một lần nữa: jsfiddle.net/toddwprice/cRLMw/8 Ngoài ra, đây là một bài báo tôi vừa đọc có một số hoạt ảnh CSS thú vị: tympanus.net/Tutorials/LoadingAnimations/index4.html
— Giá Todd
Sử dụng Firefox, tôi không thể kéo nó nếu tôi chỉ cần nhấp và kéo hình ảnh trong một lần. Nhưng nếu tôi nhấp vào hình ảnh trước rồi nhấp và kéo, tôi không bị ngăn cản việc kéo.
— Sam Rueby
2
Tôi đã chỉnh sửa HTML và CSS một chút để sử dụng thẻ <i> ... jsfiddle.net/DkcD4/77
— Adam Youngers
32

Thậm chí một giải pháp đơn giản hơn, hoạt động khá tốt!

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

Chỉ chỉnh sửa nội dung bằng hoạt ảnh thay vì ẩn một số dấu chấm ...

Demo tại đây: https://jsfiddle.net/f6vhway2/1/

Chỉnh sửa: Cảm ơn @BradCollins đã chỉ ra rằng đó contentkhông phải là thuộc tính có thể hoạt hình.

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

Vì vậy, đây là một giải pháp duy nhất cho WebKit / Blink / Electron. (Nhưng nó cũng hoạt động trong các phiên bản FF hiện tại)

— CodeBrauer
nguồn
Tôi đã xem chủ đề này chỉ tuần trước. Câu trả lời đơn giản tốt đẹp!
— r8n5n
1
+1 để tạo hoạt ảnh content. Để có được nhịp điệu hoạt hình đồng đều, bạn nên sử dụng steps(1)và xác định một khung chính phụ. Hàm bước cho biết số bước giữa các khung chính và vì chúng tôi đang chỉ định mỗi khung nên chúng tôi chỉ muốn một bước duy nhất giữa chúng. codepen.io/anon/pen/VmEdXj
— Jeff Camera
Mặc dù tôi thích sự sang trọng của giải pháp này, nhưng cần lưu ý rằng IE11 và (tại thời điểm viết bài này) Firefox không hỗ trợ tạo hoạt ảnh cho thuộc contenttính. (Không biết về Edge.)
— Brad Collins
@BradCollins cảm ơn vì điều này! Tôi đã chỉnh sửa câu trả lời của mình!
— CodeBrauer
15

Câu trả lời ngắn gọn là "không thực sự". Tuy nhiên, bạn có thể thử nghiệm chiều rộng hoạt ảnh và ẩn tràn, và có thể nhận được hiệu ứng "đủ gần". (mã bên dưới được thiết kế riêng cho firefox, thêm tiền tố của nhà cung cấp nếu cần).

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

demo: http://jsfiddle.net/MDzsR/1/

biên tập

Có vẻ như chrome có vấn đề với việc tạo hoạt ảnh cho phần tử giả. Một cách khắc phục dễ dàng là quấn dấu chấm lửng trong phần tử riêng của nó. Kiểm tra http://jsfiddle.net/MDzsR/4/

— xec
nguồn
Không hoạt động trong Chromium (có, tôi đã thay đổi tiền tố của nhà cung cấp thành -webkittừ -moz).
— David nói Khôi phục Monica
@DavidThomas bạn nói đúng - hiện đã thử nghiệm trong chrome và có vẻ như nó có vấn đề với phần tử giả. Bạn có thể quấn lược trong phần tử và animate riêng của mình mà thay vào đó (có thể làm việc trong firefox quá) jsfiddle.net/MDzsR/4
— XEC
1
Giải pháp thực sự hay và hoàn hảo cho ứng dụng Firefox OS mà tôi đang phát triển. Tinh chỉnh nó một chút: jsfiddle.net/feklee/x69uN
— feklee
Đây là phiên bản cải tiến hoạt động trên Chrome cũng như hoạt động chính xác với các phần tử không được căn trái (không thay đổi chiều rộng). Ngoài ra, nó hiển thị từng dấu chấm liên tục, không có hiện vật trượt này: jsfiddle.net/fze2qxsv
— Aayla Secura
@AaylaSecura Câu trả lời được chấp nhận có giải pháp rõ ràng hơn bằng cách sử dụng các bước thay vì stackoverflow.com/a/28074607/833146
— xec
3

Một bổ sung muộn nhưng tôi đã tìm ra cách để làm điều này hỗ trợ văn bản được căn giữa.

<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
nguồn
3

Bạn có thể tạo hoạt ảnh clip(hoặc tốt hơn clip-pathnếu bạn không cần hỗ trợ 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>
Mở rộng đoạn mã

— Jakob E
nguồn
1

Thực ra có một cách thuần CSS để làm việc này.

Tôi lấy ví dụ từ CSS Tricks, nhưng làm cho nó cũng được hỗ trợ trong Internet Explorer (tôi đã thử nghiệm nó trong 10+).

Kiểm tra Demo: 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
nguồn
Bạn đang thêm các bộ lọc độc quyền chỉ dành cho IE trong các khung hình chính dành riêng cho mozilla và dành riêng cho webkit. Đây là một cải tiến như thế nào so với giải pháp đã được chấp nhận? Nó thậm chí có cùng một vấn đề (trong khung 4 và 5 chỉ có hai dấu chấm cuối cùng và cuối cùng có thể nhìn thấy, tương ứng, như trái ngược với những gì được nêu trong câu hỏi, trong đó có 3 tiểu bang lặp đi lặp lại, không phải 5)
— XEC
Câu hỏi là về việc tạo các dấu chấm tải và chỉ có một ví dụ gần đây, không bắt buộc. Những gì tôi đã thêm là tiền tố, vì vậy IE có thể nhận ra nó tốt hơn và hiển thị nó.
— MRadev
3
-webkit-keyframessẽ chỉ áp dụng cho webkit và bên trong bạn có mã chỉ dành cho IE. Mã này không làm gì khác ngoài việc lãng phí không gian.
— xec
0

Đây là giải pháp của tôi với css thuần khiết https://jsfiddle.net/pduc6jx5/1/ đã giải thích: 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
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.