How to conveniently control CSS3 animation start point and duration

In general, we can reduce the amount of code by shorthand to control CSS3 animate animations, as long as the class name is appended to the element that needs animation, as in the following example

/* fade in and move up a little position appears */.fadeinup{    -webkit-animation:fadeinup 1000ms. 8s ease both;}

@-webkit-keyframes Fadeinup {0% {opacity:0;-webkit-transform:translatey (20px); Transform:translatey (20px)}100% { Opacity:1;-webkit-transform:translatey (0); Transform:translatey (0)}}

This is a relatively streamlined layout compared to the previous. But when there are many elements in a page that run CSS3 animations, what's even worse is that most of the animations are the same type, but the points of motion are different from the duration of the time. In order to control the effect of the different elements of the start point of time has been the length of time, only copy and then copy, and then adjust the time and duration of the motion as needed. Like this:

. fadeinup01{    -webkit-animation:fadeinup 1200ms. 1s ease both;}. fadeinup03{    -webkit-animation:fadeinup 1400ms 1.2s ease both;}. fadeinup04{    -webkit-animation:fadeinup 1600ms 1.4s ease both;} ...

This keeps copying down .....

Would it be nice if we could separate the start time and duration of the animation from individual controls?

So we think of JS

Set the custom property $ (") for each animated element that appends the Cusanimatedom class name        . Cusanimatedom "). each (function () {            var _delay = $ (this). attr (" Data-delay ");            var _duration = $ (this). attr ("Data-duration");            $ (this). CSS ("-webkit-animation-delay", (_delay) + "MS");            $ (this). CSS ("-webkit-animation-duration", (_duration) + "MS");        });

See http://gift.guzhongyi.com/to see the source code can be more profound understanding, understanding.

How to conveniently control CSS3 animation start point and duration