Menu
I'm trying to have an ellipsis animate, and was wondering if it was possible with CSS animations...
So it might be like
Loading... Loading.. Loading. Loading... Loading.. And basically just continue like that. Any ideas?
Edit: like this: http://playground.magicrising.de/demo/ellipsis.html
712
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation's style, as well as possible intermediate waypoints.
you cannot animate the height of an element from an auto-computed, natural height (e.g. an element filled with text), although is is possible to animate its min-height.
You cannot play two animations since the attribute can be defined only once.
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time.
How about a slightly modified version of @xec's answer: http://codepen.io/thetallweeks/pen/yybGra
HTML
A single class added to the element:
<div class="loading">Loading</div> CSS
Animation that uses steps. See MDN docs
.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's answer has more of a slide-in effect on the dots, while this allows the dots to appear instantly.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
