Atitti CSS Transition Animation differ differences

Atitti CSS transition Animation differ difference

1.1. Transition has the advantage of being simple to use, but it has a few big limitations. 1

1.2. Transition can be triggered automatically using timeout1

1.3. js dynamic change style content, style overlay 2

1.4. Velocity and GSAP2

1.1. The advantage of transition is that it is easy to use, but it has several great limitations.  

(2) transition are disposable and cannot be repeated unless triggered repeatedly.
(3) transition can only define the start and end states, and cannot define an intermediate state, that is, there are only two states.
(4) A transition rule that defines only one property change and cannot involve multiple attributes.
CSS animation is to solve these problems and put forward.

1.2. Transition can be triggered automatically using timeout

<script>

Window.settimeout (function ()

{

Console.log ("--add cls");

$ ("#u"). AddClass ("big");

},500);

Window.settimeout (function ()

{

Console.log ("--add cls2");

$ ("#r"). AddClass ("Big2");

},1000);

1.3. js Dynamic change style content, style overlay

var style = document.getElementById ("dynamic")

style.innerhtml = ' @-webkit-keyframes myfirst{50% {background: ' +color+ ';}} \ n '

+ ' @keyframes Myfirst {50% {background: ' +color+ ';} '

var  tt= document .stylesheets[ 0 ";

tt.deleterule ( 6 //clears the animation style that was written before Span style= "font-family:"source Code pro"; Color: #268bd2; Font-size:10.5pt ">console .log (TT);

tt.insertrule ("@keyframes mymove{0%{} 100%{transform:rotatez (0deg); top:10%;left:30%;width:400px}}" ,6); //write style

keyframesIt's a plural because it contains a lot of sub-styles.Keyframe
Keyframeequivalent to ordinaryCSSstyle ofRule, soKeyframe object is only styleproperty that can be used to modify

1.4. Velocity and GSAP

The two most common JavaScript animation libraries are velocity.js and GSAP. These libraries have no performance loss when using jquery because none of them uses the jquery animation stack.

There is no performance waste in dealing with animations like this. You'll find that it 's JavaScript's performance is really similar to CSS, and the operation is more convenient.

But the fact is that JavaScript-based animations are usually as fast as CSS-based animations, some even faster. CSS animations are often thought to be faster because we are always comparing it to jquery animations, but the $.animate () of jquery is slow, but JavaScript's animation library avoids DOM manipulation, often about 20 times times faster than jquery.

" CSS3 "transition transition and animation animation-Tishi's blog-Blog Channel-CSDN.NET.html

Javascript-js How to dynamically modify @keyframes related values? -Segmentfault.html

Css-javascript How to modify @keyframes-segmentfault.html

abandon the use of jquery for Animation-A5. html

author::  Nickname :Old Wow's claws( Full Name::AttilaxAkbar Al Rapanui Attilaksachanui) 

Kanji Name: Etila ( Ayron) , email:[email protected]

reprint Please indicate source: http://www.cnblogs.com/attilax/

Atiend

Atitti CSS Transition Animation differ differences