最近在学习一份来自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. Camera 模组

    http://wenku.baidu.com/view/89d8c21014791711cc7917d5.html http://wenku.baidu.com/view/0cec54d5c1c708 ...

  2. cocos2d-x调用scheduleUpdate()不执行update()方法的解决办法【转】

    原文地址:http://blog.csdn.net/somestill/article/details/9699377 前两天使用到每帧都更新动画的scheduleUpdate()方法,但通过cclo ...

  3. mysql11---主键普通全文索引

    .1主键索引添加 当一张表,把某个列设为主键的时候,则该列就是主键索引 create table aaa (id int unsigned primary key auto_increment , n ...

  4. 在 Vim 中优雅地查找和替换 vi【转】

    本文转载自:http://harttle.land/2016/08/08/vim-search-in-file.html 总有人问我 Vim 中能不能查找,当然能!而且是超级强的查找! 这篇文章来详细 ...

  5. scrapy学习笔记:项目中 使用代理ip

    做为一个爬虫,最头疼的问题就是你的ip被封,想要在Scrapy领域无限制畅游,做好伪装是第一步,于是乎,抓取代理IP成了很多教程的开始部分.这里我说一下代理scrapy中代理ip,仅供大家借鉴! 代理 ...

  6. Ural2089:Experienced coach(二分图匹配)

    Misha trains several ACM teams at the university. He is an experienced coach, and he does not undere ...

  7. Activity并行网关和排他网关

    说一说activiti中的排他网关和并行网关 activiti工作流中我们经常用到的网关有两种: 1. Exclusive Gateway 排他网关 排他网关.png 排他网关(也叫异或(XOR)网关 ...

  8. BZOJ_2821_作诗(Poetize)_分块

    BZOJ_2821_作诗(Poetize)_分块 Description 神犇SJY虐完HEOI之后给傻×LYD出了一题:SHY是T国的公主,平时的一大爱好是作诗.由于时间紧迫,SHY作完诗 之后还要 ...

  9. bzoj1499 [NOI2005]瑰丽华尔兹——单调队列优化DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1499 朴素DP方程很好想,以右移为例,就是 f[i][x][y]=max(f[i][x][y ...

  10. bzoj1933

    背包dp 一道很早以前就见过的dp dp[i][j][k]表示选到第i本书,第一层宽度为j,第二层宽度为k的最小高度,我们先把书按高度排序,然后转移就很方便了,因为高度降序,所以后选的书不影响之前选的 ...