about how animate for CSS3 "..." Loading animation effect (i)

The point-and-point loading effect achieved:

One: CSS3 Animation implementation code

HTML code:

Submit Order in <span class= "Ani_dot" >...</span>

CSS code:

. ani_dot {    font-family:simsun;    }:root. Ani_dot {/* use hack here because Ie6~ie8 browser, vertical-align parsing is not canonical, A value of bottom or other will change the actual height of the button */    display:inline-block;    width:1.5em;    Vertical-align:bottom;    Overflow:hidden;} @-webkit-keyframes Dot {    0% {width:0; margin-right:1.5em;}    33% {width:. 5em; margin-right:1em;}    66% {width:1em; Margin-right:. 5em;}    100% {width:1.5em; margin-right:0;}}. Ani_dot {    -webkit-animation:dot 3s infinite step-start;} @keyframes Dot {    0% {width:0; margin-right:1.5em;}    33% {width:. 5em; margin-right:1em;}    66% {width:1em; Margin-right:. 5em;}    100% {width:1.5em; margin-right:0;}}. Ani_dot {    Animation:dot 3s infinite step-start;}

The result is the one that appears.
Note the point:

1.ie10+ and other browsers, Dot dot animation disappears, IE6-IE9 is a normal dot point text.
2.animate animation is continuous, but we here is a frame one frame, one card one card, not so continuous effect, used step-start .
3. The above code also uses the CSS3 selector :root . : root for ie9+ and other modern browsers hack, ie6-7 or even IE8, inline-block parsing of horizontal elements is different from the inline level, resulting in a high degree of distraction, so display: Inline-block to hack processing.

Second: Animation (animation) parameters of the detailed

As the animation animation is used above, this animation parameter is described in detail here.

Brief introduction

CSS Animation (animations) simply means that in a fixed period of time in the animation to change its CSS or some value within a certain frequency, so as to achieve visual conversion animation effect. Many aspects of animations can be controlled, including animation run time, start and end values, animation pauses and delays in its start time, and so on.

Grammar

<single-animation> = <single-animation-name> | | <time> | | <single-animation-timing-function> | | <time> | | <single-animation-iteration-count> | | <single-animation-direction> | | <single-animation-fill-mode> | | <single-animation-play-state>< ' Animation-name ';: Retrieves or sets the animation name applied by the object < ' animation-duration ' > : Retrieves or sets the duration of the object animation < ' Animation-timing-function ';: Retrieves or sets the transition type of the object animation < ' Animation-delay ';: Retrieves or sets the time of the object animation delay < ' Animation-iteration-count ';: Retrieves or sets the number of cycles of object animation < ' Animation-direction ';: Retrieves or sets whether the object animation reverses movement in the loop < ' Animation-fill-mode ';: Retrieves or sets the state of the object outside of animation time < ' animation-play-state ';: Retrieves or sets the state of the object animation. The consortium is considering whether to remove the attribute because the state of the animation can be implemented in other ways, such as resetting the style

Animation

The shorthand properties for all animated properties, except for the Animation-play-state property.

Animation-name

Specifies the name of the @keyframes animation. is the name of the animation followed by @keyframes, this demo in this article named Dot, meaning "point."

Animation-duration

Specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0.

Animation-timing-function

Specifies the speed curve of the animation. The default is "ease".

Common animation Speed Parameters:

1. Linear: Linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)

2. Ease: smooth transitions. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)

3. Ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)

4. Ease-out: From fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)

5. Ease-in-out: From slow to fast to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)

6. Step-start: Equivalent to Steps (1, start)

7. Step-end: Equivalent to Steps (1, end)

8. Steps (<integer>[, [start | end]
   ]?) : A step function that accepts two parameters. The first argument must be a positive integer that specifies the number of steps for the function. The second parameter value can be start or end, specifying the point in time at which the value of each step changes. The second parameter is optional and the default value is end.

9. Cubic-bezier (<NUMBER>, <number>, <number>,
   <number>): Specific Bézier curve type, 4 values in [0, 1] Range

Animation-delay

Specifies when the animation starts. The default is 0. This means that the animation delays execution time.

Animation-iteration-count

Specifies the number of times the animation is played. The default is 1. Of course, we can set 2 times, 3 times, and then recursion. There is also a wireless loop keyword infinite , that is, repeated looping animation.

Animation-direction

Specifies whether the animation will play backwards in the next cycle. The default is "normal". Of course, the following values are also available:

1. reverse: Run in reverse direction

2. alternate: Animation runs in the opposite direction and runs continuously alternately

3. alternate-reverse: The animation runs in reverse direction and runs continuously alternately

Animation-fill-mode

Specifies the state outside the object's animation time.

1. none: Default value. Do not set state outside of object animation

2. forwards: Sets the state of the object at the end of the animation

3. backwards: Sets the state of the object when the animation starts

4. both: Sets the state of the object to the end or start of the animation, which is preceded by the "from" or "0%" keyframe, and the "to" or "100%" keyframe state after the animation is completed.

Animation-play-state

Specifies whether the animation is running or paused. The default is "running" . There is also a value paused : Pause.

Three: Animation Animation example

Instance one uses from to :

p{    width:100px;    height:100px;    background:red;    position:relative;    Animation:mymove 5s Infinite;    -moz-animation:mymove 5s Infinite; /*firefox*/    -webkit-animation:mymove 5s infinite;/*safari and chrome*/} @keyframes mymove{from    {left:0px;} to    {left:200px;}} @-moz-keyframes mymove {/*firefox*/from    {left:0px;}    to {left:200px;}} @-webkit-keyframes mymove{/*safari and chrome*/from    {left:0px;}    to {left:200px;}}

Instance two usage percentages:

@keyframes myfirst{0% {background:red; left:0px; top:0px;}    25% {background:yellow; left:200px; top:0px;}    50% {background:blue; left:200px; top:200px;}    75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}    @-moz-keyframes myfirst{/* Firefox */0% {background:red; left:0px; top:0px;}    25% {background:yellow; left:200px; top:0px;}    50% {background:blue; left:200px; top:200px;}    75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}    @-webkit-keyframes myfirst{/* Safari and Chrome */0% {background:red; left:0px; top:0px;}    25% {background:yellow; left:200px; top:0px;}    50% {background:blue; left:200px; top:200px;}    75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}    @-o-keyframes Myfirst {/* Opera */0% {background:red; left:0px; top:0px;}    25% {background:yellow; left:200px; top:0px;} 50% {background:blue;left:200px;    top:200px;}    75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}}

Example three, using Js+transform and animation to achieve 3D animation

Only browsers in the WebKit kernel can see the relevant 3D animation effects.
Implementation results:

CSS code:

Body {font-family: ' Lucida Grande ', Verdana, Arial;      font-size:12px;        } #stage {margin:150px auto;        width:600px;        height:400px;      -webkit-perspective:800;        } #rotate {margin:0 auto;        width:600px;        height:400px;        -webkit-transform-style:preserve-3d;        -webkit-animation-name:x-spin;        -webkit-animation-duration:7s;        -webkit-animation-iteration-count:infinite;      -webkit-animation-timing-function:linear;        }. ring {margin:0 auto;        height:110px;        width:600px;        -webkit-transform-style:preserve-3d;        -webkit-animation-iteration-count:infinite;      -webkit-animation-timing-function:linear;      }. Ring >: Nth-child (Odd) {background-color: #995C7F;      }. Ring >: Nth-child (even) {background-color: #835A99;        }. poster {position:absolute;        left:250px; width:100px;        height:100px;        opacity:0.7;        Color:rgba (0,0,0,0.9);      -webkit-border-radius:10px;        }. Poster > P {font-family: ' Georgia ', serif;        font-size:36px;        Font-weight:bold;        Text-align:center;      margin-top:28px;        } #ring-1 {-webkit-animation-name:y-spin;      -webkit-animation-duration:5s;        } #ring-2 {-webkit-animation-name:back-y-spin;      -webkit-animation-duration:4s;        } #ring-3 {-webkit-animation-name:y-spin;      -webkit-animation-duration:3s;        } @-webkit-keyframes X-spin {0% {-webkit-transform:rotatex (0deg);}        50% {-webkit-transform:rotatex (180deg);}      100% {-webkit-transform:rotatex (360deg);}        } @-webkit-keyframes Y-spin {0% {-webkit-transform:rotatey (0deg);}        50% {-webkit-transform:rotatey (180deg);}      100% {-webkit-transform:rotatey (360deg);} } @-wEbkit-keyframes Back-y-spin {0% {-webkit-transform:rotatey (360deg);}        50% {-webkit-transform:rotatey (180deg);}      100% {-webkit-transform:rotatey (0deg);} }

HTML code:

<p id= "Stage" >  <p id= "Rotate" >    <p id= "ring-1" class= "Ring" ></p>    <p id= " Ring-2 "class=" Ring "></p>    <p id=" ring-3 "class=" Ring "></p>  </p></p>

JS Code:

const posters_per_row = 12;const Ring_radius = 200;function setup_posters (ROW)    {var posterangle = 360/posters_per_row;      for (var i = 0; i < posters_per_row; i + +) {var poster = document.createelement (' P ');            Poster.classname = ' poster ';      var transform = ' Rotatey (' + (Posterangle * i) + ' deg) Translatez (' + Ring_radius + ' px) ';            Poster.style.webkitTransform = transform;      var content = Poster.appendchild (document.createelement (' P '));      Content.textcontent = i;    Row.appendchild (poster);    }}function init () {setup_posters (document.getElementById (' ring-1 '));    Setup_posters (document.getElementById (' ring-2 ')); Setup_posters (document.getElementById (' ring-3 '));} Window.addeventlistener (' Load ', init, false);