Use animation-timing-function in CSS3 to implement point-to-point loading animation and css3timingfunction

Use animation-timing-function in CSS3 to implement point-to-point loading animation and css3timingfunction

Html code:

<A href = "javascript:" class = "grebtn"> <span class = "DoCoMo"> </span> </a>

Css code:

.grebtn {    display: inline-block;    padding: 0.25em 1.25em;    border: 1px solid;    border-radius: 2px;    vertical-align: bottom;    font-weight: inherit;    border-color: #208000 #1F7F00;    background-color: #289600;    color: #fff;    text-shadow: 0 -1px #137900;}.dotting {    display: inline-block; min-width: 2px; min-height: 2px;    box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor;     -webkit-animation: dot 4s infinite step-start both;    animation: dot 4s infinite step-start both;    *zoom: expression(this.innerHTML = '...'); /* IE7 */}.dotting:before { content: '...'; } /* IE8 */.dotting::before { content: ''; }:root .dotting { margin-right: 8px; } /* IE9+,FF,CH,OP,SF */@-webkit-keyframes dot {    25% { box-shadow: none; }    50% { box-shadow: 2px 0 currentColor; }    75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }}@keyframes dot {    25% { box-shadow: none; }    50% { box-shadow: 2px 0 currentColor; }    75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; }}

The implementation result is as follows:

Submitting order

Css3 animation is used here.Animation-timing-function,Retrieving or setting the transition type of an object Animation.

Linear: linear transition. Equivalent to the besell curve (0.0, 0.0, 1.0, 1.0) transition: smooth transition. Equivalent to the besell curve (0.25, 0.1, 0.25, 1.0)

Slow-in: from slow to fast. Equivalent to the beiser curve (0.42, 0, 1.0, 1.0) Forward-out: From fast to slow. Equivalent to the besell curve (0, 0, 0.58, 1.0)

Slow-in-out: from slow to fast and then to slow. Equivalent to the besell curve (0.42, 0, 0.58, 1.0)

Step-start: equivalent to steps (1, start)

Step-end: equivalent to steps (1, end)

Steps (<integer> [, [start | end]?) : Step Functions that accept two parameters. The first parameter must be a positive integer that specifies the number of steps of the function. The second parameter can be set to start or end, which specifies the time when the value of each step changes. The second parameter is optional and the default value is end.

Cubic-bezr (<number >,< number>): the type of the beiser curve. Four values must be in the range [0, 1.

Step-start is used here.

Http://www.css88.com/book/css/properties/animation/animation-timing-function.htm details

Reference: http://www.zhangxinxu.com/wordpress/2014/12/css3-animation-dotting-loading/