Recently in the learning of a git animation framework source code, read 70% of the core codes, and intend to practice a version of their own, but goose, all the frame up, in the animation this piece has a problem:
Want to design a slideinleft animation, must think of from the offset-10% position, moved to 0 position, so cheerfully write a code:
@keyframes fadeinleft{
From{transform:translate3d ( -100px,0,0);}
To{transform:translate3d (0px,0,0);}
}
Self-thought, the logic is tight without any problems, the initial frame, the end frame has, nitrogen, why not animation pinch? Read the Git animation source, oh, I forgot to add Firefox's private property prefix, so Hin happy to add:
@keyframes fadeinleft{
From{transform:translate3d ( -100px,0,0);}
To{transform:translate3d (0px,0,0);}
}
@-webkit-keyframes fadeinleft{
from{-webkit-transform: Translate3d ( -100px,0,0); Transform:translate3d ( -100px,0,0);}
to{-webkit-transform: Translate3d (0,0,0); Transform:translate3d (0px,0,0);}
}
Refresh the page, animated animation, before I almost scared me to write a morning of the animation plugin lost confidence O (╥﹏╥) o ...
Fully visible, especially for the new properties of CSS3, the browser private property prefix, how important, and goose, if you want to know each property of the browser private prefix, you must go to MDN or W3 every time, no trouble, so degree Niang, "How Not full CSS prefix", which 100 degrees does not matter, Top answers without exception are replies: Autoprefixer, do not understand what things, according to the link to open a look:
Wasn't it a surprise, an accident? You only need to write the code on the left, and the right side will automatically generate a compatible version of the browser with a prefix, is not very cool, and you can also set the number of forward-compatible versions based on the compatibility of the site, generally speaking, the less forward compatibility, the resulting completion code is also more streamlined, because the compatibility of the descendant browser, The implementation of the CSS3 standard must be more and more good ~
This record, artifact Autoprefixer, you most beautiful ~
Front-end CSS3 style prefix auto-complete tool--autoprefixer