过渡属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

新的多列属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
column-count 规定元素应该被分隔的列数。 3
column-fill 规定如何填充列。 3
column-gap 规定列之间的间隔。 3
column-rule 设置所有 column-rule-* 属性的简写属性。 3
column-rule-color 规定列之间规则的颜色。 3
column-rule-style 规定列之间规则的样式。 3
column-rule-width 规定列之间规则的宽度。 3
column-span 规定元素应该横跨的列数。 3
column-width 规定列的宽度。 3
columns 规定设置 column-width 和 column-count 的简写属性。 3

新的用户界面属性

下面的表格列出了所有的转换属性:

属性 描述 CSS
appearance 允许您将元素设置为标准用户界面元素的外观 3
box-sizing 允许您以确切的方式定义适应某个区域的具体内容。 3
icon 为创作者提供使用图标化等价物来设置元素样式的能力。 3
nav-down 规定在使用 arrow-down 导航键时向何处导航。 3
nav-index 设置元素的 tab 键控制次序。 3
nav-left 规定在使用 arrow-left 导航键时向何处导航。 3
nav-right 规定在使用 arrow-right 导航键时向何处导航。 3
nav-up 规定在使用 arrow-up 导航键时向何处导航。 3
outline-offset 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 3
resize 规定是否可由用户对元素的尺寸进行调整。 3

CSS3 总结-2的更多相关文章

  1. 纯CSS3实现的一些酷炫效果

    之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...

  2. CSS3 border-radius边框圆角

    在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...

  3. CSS3 3D立方体效果-transform也不过如此

    CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...

  4. 三分钟学会用 js + css3 打造酷炫3D相册

    之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...

  5. 使用CSS3实现一个3D相册

    CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...

  6. Web大前端时代之:HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. 前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  9. 原生js+css3实现图片自动切换,图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  10. css3线条围绕跑马+jquery打字机效果

    原文地址:css3线条围绕跑马+jquery打字机效果 有图有真相,今天偶然看到了一种效果,仔细看了下,发现它是用css的clip+css3的动画实现的,简直叼.于是自己拿来了前一阵子写的打字机效果, ...

随机推荐

  1. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  2. Android Studio 中快速提取方法

    在开发过程中,有时在一个方法内部写了过多的代码,然后想要把一些代码提取出来封装下,分离开放在一个单独的方法里,可能你的做法是直接选中后Ctrl + 叉,或者 Ctrl + C,但在Android St ...

  3. ThinkPHP导入Excel文件(使用PHPExcel)

    一. 主要知识点,用PHPExcel导入Excel数据经过这几天测试还是可以,xls,xlsx都可以获取Excel的数据.下载地址:http://phpexcel.codeplex.com/ O.开发 ...

  4. 去掉android的屏幕上的title bar

    在配置文件里修改 (关键代码:android:theme="@android:style/Theme.NoTitleBar.Fullscreen",如果想只是去除标题栏就后面不用加 ...

  5. Node.js笔记3

    ###Node.js核心模块 1. 全局对象 Node.js中能够访问到的都是global的属性 **process它用于描述当前 Node.js 进程状态的对象,提供了一个与操作系统的简单接口.** ...

  6. POJ 3623 Best Cow Line, Gold(字符串处理)

    题意:给你一个字符串,让你重新排列,只能从头或者尾部取出一个放到新字符串队列的最后.按照字典序. 解决方法:比较前后两个的大小,谁小输出谁,相等,就往当中比来确定当前应该拿最前面的还是最后面的,如果再 ...

  7. iOS __func__标识符

    iOS底层是GCC,所以也支持 __func__标识符,用于打印当前函数名,可以说是排错利器. // data should not be nil nor empty ) {// Exception ...

  8. Java判断字符串是中文还是英文

    在做开发的时候我们经常需要用到根据某个字符或者字符串来判断其是中文还是英文,从而做相应的处理,其实不难,大多数人们都是用到正则来判断的,下面小贝就给大家分享一下Java判断字符串是中文还是英文 推荐文 ...

  9. (转)WIN2003服务器禁PING的方法

    方法一:用windows系统自带的防火墙规则设置禁止别人Ping我的机器 win2003系统默认情况下,所有Internet控制消息协议(ICMP)选项均被禁用,也就是对客户机有反应,因而易于受到攻击 ...

  10. python 从数据库表生成model

    python 从数据库表生成model 找了很久才找到这个,我是新手... 现在已有建好的数据库,需要基于原有数据做数据分析的web应用,我选择python+Tornado ,由于不想写SQL语句,就 ...