CSS3 Animation--Dynamic ellipsis

Today I learned CSS3 animation, related to the properties: @keyframes, Animation,animation-duration,animation-name,animation-timing-function,

Animation-delay,animation-iteration-count,animation-direction

: (To make the block element more explicit, we use a variety of strongly contrasting colors)

First, the HTML code: (very simple, that is, the definition of an unordered list, but the main is the simple interface, as a block-level element, this defines the 2 div)

<! DOCTYPE html>
The following CSS3 code:
UL, Li {list-style-type:none}.about {width:100%; background: #aaa; padding:20px 0; Overflow:hidden}.about ul {wid th:1000px; Margin:auto; line-height:24px; background: #bbb;}
#fountainG {position:relative; width:240px; Height:29px;background: #ccc;}
/* This is each point of its own block */#fountainG li {background: #ddd;p osition:absolute; top:0; width:29px; Height:29px;-moz-animation:boun Ce_fountaing 3s linear infinite; -moz-transform:scale (. 3);-moz-border-radius:19px;-webkit-animation:bounce_fountaing 1.2s Linear infinite;- Webkit-transform:scale (. 3); -webkit-border-radius:19px;-ms-animation:bounce_fountaing 1.2s Linear Infinite;-ms-transform:scale (. 3); -ms-border-radius:19px;-o-animation:bounce_fountaing 1.2s Linear Infinite;-o-transform:scale (. 3); -o-border-radius:19px;animation:bounce_fountaing 1.2s Linear Infinite;transform:scale (. 3); border-radius:19px; } #fountainG li:first-child {left:0;-moz-animation-delay:0.48s;-webkit-animation-delay:0.48s;-ms-animation-delay: 0.48s; -o-animation-delay:0.48s; Animation-delay:. 48s; } #fountainG Li:nth-child (2) {left:30px;-moz-animation-delay:0.6s;-webkit-animation-delay:0.6s;- ms-animation-delay:0.6s; -o-animation-delay:0.6s; animation-delay:0.6s; } #fountainG Li:nth-child (3) {Left:60px; -moz-animation-delay:0.72s;-webkit-animation-delay:0.72s; -ms-animation-delay:0.72s; -o-animation-delay:0.72s; animation-delay:0.72s; } #fountainG Li:nth-child (4) {left:90px;-moz-animation-delay:0.84s;-webkit-animation-delay:0.84s;- ms-animation-delay:0.84s; -o-animation-delay:0.84s; animation-delay:0.84s; } #fountainG Li:nth-child (5) {left:120px;-moz-animation-delay:0.96s;-webkit-animation-delay:0.96s;- ms-animation-delay:0.96s; -o-animation-delay:0.96s; animation-delay:0.96s; } #fountainG Li:nth-child (6) {left:150px;-moz-animation-delay:1.08s;-webkit-animation-delay:1.08s;- ms-animation-delay:1.08s; -o-animation-delay:1.08s; animation-delay:1.08s; } #fountainG Li:nth-child (7) {left:180px;-moz-animation-delay:1.2s;-webkit-animation-delay:1.2s;- Ms-animation-delay:1.2s; -o-animation-delay:1.2s; Animation-delay:1.2s; } #fountainG Li:nth-child (8) {left:210px;-moz-animation-delay:1.32s;-webkit-animation-delay:1.32s;- ms-animation-delay:1.32s; -o-animation-delay:1.32s; animation-delay:1.32s; }

/* Here is the definition animation function, very simple is reduced from 1 time times to 0.3 times times. */@-moz-keyframes bounce_fountaing {0% {-moz-transform:scale (1); Background-color: #238d7b;} 100% {-moz-transform: Scale (. 3); Background-color: #FFFFFF;}} @-webkit-keyframes bounce_fountaing {0% {-webkit-transform:scale (1); Background-color: #238d7b;} 100% {- Webkit-transform:scale (. 3); Background-color: #FFFFFF;}} @-ms-keyframes bounce_fountaing {0% {-ms-transform:scale (1); Background-color: #238d7b;} 100% {-ms-transform:scale (. 3 ); Background-color: #FFFFFF;}} @-o-keyframes bounce_fountaing {0% {-o-transform:scale (1); Background-color: #238d7b;} 100% {-o-transform:scale (. 3); Background-color: #FFFFFF;}} @keyframes bounce_fountaing {0% {transform:scale (1); Background-color: #238d7b;} 100% {Transform:scale (. 3); Background-color: #bbb;}}
To get a clearer view of the relationship between block levels, cut a picture without animation: (initial state is. 3)
CSS3 Animation--Dynamic ellipsis