Front-end CSS3 style prefix auto-complete tool--autoprefixer

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.