最近在学习一份来自git的动画框架源码,看懂70%的核心代码后,打算自己动手实践一版,然鹅,所有框架搭起来以后,在动画这块却出了问题:

想设计一个slideInLeft的动画,必然想到了要从偏移-10%的位置,移动到0的位置,于是,乐呵呵编写了如下代码:

@keyframes fadeInLeft{
    from{transform:translate3d(-100px,0,0);}     
    to{transform:translate3d(0px,0,0);}
}

自认为,逻辑严密没有任何问题,初始帧、结束帧都有了,但是为什么没有动画呢?看了git的动画源码,原来是我忘记加火狐的私有属性前缀了,加上如下代码:

@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);}
}

刷新页面,动画动起来了(*^▽^*)~

综上可见,尤其对css3的新属性而言,浏览器私有属性前缀,是多么的重要,然鹅,如果要知道每个属性的浏览器私有前缀,必须每用一个就去mdn或者w3查一遍,好不麻烦,于是度娘一下,“如何不全css前缀”,这一百度不要紧,排名前几的答案无一例外都是回复:autoprefixer,不明白什么东西,根据链接点开一看:

是不是很惊喜,意外?你只需要按照标准写法编写左侧代码,右侧会自动生成兼容各个浏览器版本的带前缀写法,是不是很酷炫,而且你还可以根据网站的兼容性设置向前兼容的版本数,一般来说,向前兼容越少,生成的补全代码也越精简,因为后代浏览器的兼容性、对css3标准的实现肯定是越来越棒哒~

就此记录一下,神器autoPrefixer,你最美~

前端css3样式前缀自动补全工具--autoprefixer的更多相关文章

  1. Shell脚本一键部署——源码编译安装MySQL及自动补全工具

    Shell脚本一键部署--源码编译安装MySQL及自动补全工具 编译安装MySQL 1.软件包 Mysql安装包 将安装包拖至/opt目录下,编辑一个脚本文件,将以下内容复制进去,然后source或者 ...

  2. msfvenom命令自动补全工具下载=>msfvenom-zsh-completion

    msfvenom参数和命令很多,各种payload和encoder经常让⼈眼花缭乱,特别是对英语不好的⼈来说有些命令可能很容易忘记. 所以 Green_m 开发了⼀个zsh插件,可以⾃动化的补全msf ...

  3. CSS3前缀自动补全方案和插件

    第一种方法:prefix free,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀 <script src="prefixfree.min.js"></s ...

  4. Mycil命令行MySQL语法高亮和自动补全工具

    MyCli 是MySQL,MariaDB和Percona的命令行界面,具有自动完成和语法高亮的功能. 其效果如图: 那么我们应该怎么安装它呢,这里附上windows的安装方法. 在命令行下输入 pip ...

  5. MySQL-代码自动补全工具

    一.工具名称 mycli :  具有自动完成和语法高亮的功能 二.安装 pip install mycli 三.使用方法: mycli -u root -p password 四.效果图

  6. ubuntu 14.04 vim YoucompleteMe 代码自动补全工具安装

    安装步骤如下: sudo apt-get install vim ; sudo apt-get install vim-youcompleteme ; sudo apt-get install vim ...

  7. 如何配置webpack让浏览器自动补全前缀

    一.postcss-loader有什么用? PostCSS 本身是一个功能比较单一的工具.它提供了一种方式用 JavaScript 代码来处理 CSS.它负责把 CSS 代码解析成抽象语法树结构(Ab ...

  8. Jupyter Notebook自动补全

    大多数程序员都非常熟悉不同的自动补全工具.然而,我注意到许多数据科学家还没有使用它.如果你是他们中的一员,是时候开始使用这个提高效率的工具了 什么是自动补全? 它是你的编程环境提供的一种功能,用于完成 ...

  9. Redis 实战 —— 08. 实现自动补全、分布式锁和计数信号量

    自动补全 P109 自动补全在日常业务中随处可见,应该算一种最常见最通用的功能.实际业务场景肯定要包括包含子串的情况,其实这在一定程度上转换成了搜索功能,即包含某个子串的串,且优先展示前缀匹配的串.如 ...

随机推荐

  1. win64 qt与fortran (codeblocks) 混合编程

    本教程主要解说用fortran生成dll供qt调用(win64) 本教程须要的软件及文件可从以下的连接下载: http://pan.baidu.com/s/1c04jziC fortran我用的软件是 ...

  2. 原生js 平滑滚动到页面的某个位置

    window.scrollTo() 语法1:  window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...

  3. http的session和cookie

    1 http session和http请求之间的关系 http协议是无状态的,一次会话服务端需要处理多次http请求,就算是长连接,也是要发送多次请求的,由于http无状态所有每次的请求都是独立的,服 ...

  4. mysql连接com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link

    jdbc驱动:mysql-connector-java-5.1.39-bin.jar 这个有问题, 换成:mysql-connector-java-5.1.34.jar 就可以了

  5. HDU - 1150 Machine Schedule(最小点覆盖数)

    1.有两台机器A和B以及N个需要运行的任务.A机器有n种不同的模式,B机器有m种不同的模式,而每个任务都恰好在一台机器上运行.如果它在机器A上运行,则机器A需要设置为模式xi,如果它在机器B上运行,则 ...

  6. I.MX6 Android CAN 命令行测试

    /********************************************************************* * I.MX6 Android CAN 命令行测试 * 说 ...

  7. NABCD项目需求报告

    项目:记账小账本 N:need 需求 根据我们的调查,很多人虽然知道记账有很多的好处,但是因为种种的原因,我们都没能养成记账的好习惯,所以我们所做的记账小软件,说到底是一个行为养成类的软件,而这类软件 ...

  8. 洛谷P3004 宝箱Treasure Chest——DP

    题目:https://www.luogu.org/problemnew/show/P3004 似乎有点博弈的意思,但其实是DP: f[i][j] 表示 i~j 的最优结果,就可以进行转移: 注意两个循 ...

  9. 从0开始学习Hadoop(2)安装JDK

    参考文档: 安装包方式安装:http://www.cnblogs.com/wuyudong/p/ubuntu-jdk8.html PPA方式安装:推荐  http://www.cnblogs.com/ ...

  10. springMVC实现基本文件夹压缩下载功能

    将文件夹压缩后下载: @Slf4j public class Test { private static final String BASE_PATH = "/root/doc/" ...