css3pll是什么车,CSS3的新属性的一下总结

由于自己经常搞混：animation，transition，transform这三个属性，今天就总结一下

首先是：

transform:和css3一些基本属性，例如：box-shadow、border-radius、background-position等等的这些属性是一个类型的，他可以做2D、3D，旋转、放大、缩小等的一些变化

动画类：

animation & transition　　而这两个是做动画类的属性；

transition的使用注意

(1)目前，各大浏览器(包括IE 10)都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。

(2)不是所有的CSS属性都支持transition，完整的列表查看这里，以及具体的效果。

(3)transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。

transition的局限

transition的优点在于简单易用，但是它有几个很大的局限。

(1)transition需要事件触发，所以没法在网页加载时自动发生。

(2)transition是一次性的，不能重复发生，除非一再触发。

(3)transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

(4)一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

transition

@-webkit-keyframes rainbow {

0% { background: #c00; }

50% { background: orange; }

100% { background: yellowgreen; }

}

@keyframes rainbow {

0% { background: #c00; }

50% { background: orange; }

100% { background: yellowgreen; }

}

div:hover{

transition: 1s rainbow

}

css3.0新属性效果在ie下的解决方案(兼容性)

css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

小K的H5之旅-HTML5与CSS3部分新属性浅见

一.HTML部分 1.HTML5新特点 向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法 可以省略的元素:空元素语法的元素{br ...

css3的新属性 新增的颜色--- 透明度---两种渐变---定义多张背景图--background-size

css31==>颜色的6种表示的方法有6种表示颜色的方法 关键字 rgb rgba(css3) 16进制 hsl hsla hsla h=>是色相,值为360, s=>饱和度,0%- ...

CSS3的新属性

1.圆角矩形 .border_radius_test{ border-radius:25px; -moz-border-radius:25px; } 数值越大越圆 2.容器阴影 .box_shadow ...

css3 的新属性

1,动画,animate------>//动画-名称-动画的时间间隔-以什么方式播放-循环 .right{ animate:dropdown 4px 5px #000; // x的偏移值 y的偏 ...

使用css3新属性clip-path制作小图标

一般一个网页上面,或多或少都会用到一些小图标,展示这些小图标的方法有很多种.最简单的做法就是将UI图上面的每个小图标都保存为图片,一个小图标就一张图片.但这也是比较笨的方法,因为浏览器同一时间最多加载 ...

css3新属性@ text-shadow

text-shodow是css3的新属性,可以利用这个属性使字体更有立体感,还可以创造有趣的效果. 1.语法形式:text-shadow : x-offset(x轴偏移量) y-offset(y轴偏移 ...

CSS3新属性注释及实例

这里把CSS3的新属性单独拿出来讲解一下: border-radius 属性用于创建圆角 div { border:2px solid; border-radius:25px; -moz-border ...

css3 的box-sizing属性理解

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

随机推荐

ExtJs中gridpanel分组后组名排序

/** * 定义降序的groupingStore */ var DescGroupingStore = Ext.extend(Ext.data.GroupingStore, { groupDir : ...

jade反编译

安装html2jade npm install html2jade -g 反编译,默认输出同名jade html2jade test2.html 反编译为其他文件名 html2jade test2.h ...

redis持久化(摘录)

redis是一个支持持久化的内存数据库,也就是说redis需要经常将内存中的数据同步到磁盘来保证持久化.redis支持两种持久化方式,一种是 Snapshotting(快照)也是默认方式,另一种是Ap ...

bzoj 1761: [Baltic2009]beetle 区间dp

1761: [Baltic2009]beetle Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 255  Solved: 92[Submit][Statu ...

SpringMVC11文件上传

开源一套DirectUI界面库

http://www.cppblog.com/weiym/archive/2012/07/03/181307.html

log4Net使用的四个步骤

第一步.引入程序集,并建立配置文件,放在根目录下config文件夹里.配置文件如下: <?xml version="1.0" encoding="utf-8&quo ...

Redis客户端管理工具的安装及使用

1.下载及安装 请到官网下载:www.treesoft.cn,要最新的版本treeNMS, window系统下载直接解压,就可以用了,免安装,免布署. 2.登录及连接参数配置 登录后,要配置连接参数信 ...

Oracle——多表查询

本次预计讲解的知识点 1. 多表查询的操作.限制.笛卡尔积的问题: 2. 统计函数及分组统计的操作: 3. 子查询的操作,并且结合限定查询.数据排序.多表查询.统计查询一起完成各个复杂查询的操作: 一 ...

phpstorm 代码注释后，撤销某段代码的注释的，快捷键是什么？

phpstorm 的代码注释有两种风格,一种是双斜杠,另一种是 /* ...  */风格,两者的快捷键都是开关式(即按第一次为注释,再按一次为撤销注释),快捷键如下: 1.双斜杠注释   Ctrl + ...