CSS变换计时与延迟:CSS变换(transition)

文章简介:CSS变换(transition)

-webkit-transition
-moz-transition
-o-transition
transition

CSS property

被变换的属性(比如, color)。

Duration

变换持续的时间,通常以秒来计算(比如, .25s).

Timing function

允许你控制持续的时间的计算方式。与其使用一个简单的线性计算,你可以使变换加速(渐入)或者减速(淡出),或者甚至specify a beat or count (比如,linear). More on this later in the article.

Delay

在动作和变换开始之间等待多久,通常用秒来表示(比如, .1s)。如果你不想延迟,该值可省略。

CSS属性

color
色彩

crop
百分比

font-weight
数字

height
百分比,长度

letter-spacing
长度

line-height
百分比,长度,数字

opacity
数字

outline-offset
整数

outline-width
长度

right
百分比,长度

text-indent
百分比,长度

text-shadow
阴影

vertical-align
百分比,长度,关键词

visibility
可见性

word-spacing
百分比,长度

z-index
正整数

zoom
数字

变换计时与延迟

使用变换,你可以改变变换的速率,在开始的时候较慢然后在结束的时候加速,反之亦然,或者之间的任何事情。CSS变换有5个计时的关键词,同时也允许你自己定义你自己的计时曲线。

cubic-bezier(x1, y1, x2, y2)
X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。

linear
均速

ease
逐渐慢下来

ease-in
加速(渐入)

ease-out
减速(淡出)

ease-in-out
加速然后减速

时间: 2024-09-20 05:33:12

CSS变换计时与延迟:CSS变换(transition)的相关文章

CSS变换计时与延迟

-webkit-transition -moz-transition -o-transition transition CSS property 被变换的属性(比如, color). Duration 变换持续的时间,通常以秒来计算(比如, .25s). Timing function 允许你控制持续的时间的计算方式.与其使用一个简单的线性计算,你可以使变换加速(渐入)或者减速(淡出),或者甚至specify a beat or count (比如,linear). More on this l

jquery eas...-easyui是如何加载easyui.css文件中没有的css样式的?

问题描述 easyui是如何加载easyui.css文件中没有的css样式的? easyui是如何加载easyui.css文件中没有的css样式的? 比如,我用jquery去生成一个linkbutton $('#lb').linkbutton({ plain:true });之后.easyui是怎么加载出样式的?我看了浏览器解析出来的代码是这样: <a id="lb" href="javascript:void(0)" class="l-btn l-

纯css下拉菜单: 纯 css 实现斜角 by colinivy

css实现斜角的原理主要是利用了div两相互垂直的border的交界 (斜角组合还有更多变化...)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

写CSS文件的流程和CSS代码顺序

文章简介:css制作流程及标准. css制作流程及标准 (一)制作流程:1,创建文件(文件管理及命名)2,与html文档建立关系 注意点:    1)不建议使用:内联样式和内嵌样式         原因:结构(html)和表现(css样式)没有分离    2)区别:外链样式与导入样式(http://zhidao.baidu.com/question/198616109.html)    3)网站常用:外链样式 3,制作页面样式 注意点: 同html框架一致从上到下 从整体到局部 共用样式到个别样

CSS技巧荟萃:了解CSS页面布局和加载流程

如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性.在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 介绍 在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式.这里我们主要重点介绍两个类型的元素: block inline 如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型. inline类型的元素包括:

学习CSS:我们一起认识CSS闭合浮动元素

css|浮动 按照CSS规范,浮动元素(floats)会被移出文档流,不会影响到块状盒子的布局而只会影响内联盒子(通常是文本)的排列.因此当其高度超出包含容器时,一般父容器不会自动伸长以闭合浮动元素.但是有时我们却需要这种自动闭合行为,具体如何处理呢? 有一种做法就是在父容器内再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器.这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签,所以我个人不大喜欢.后来又有了一种新的方式,使用 :after 伪类动态的

HTML及CSS基础课(七) CSS: An Overview

What CSS is(什么是CSS) CSS(Cascading Style Sheets级联样式表)是一种描述你html的外观和格式的语言. 一个样式表(style sheet)是一个描述html页面看起来怎么样的文件. 我们说这些样式表是级联(cascading)的是因为这些表格可以应用超过一种的样式.例如,你想让所有的段落<p>的字都是蓝色的,但是只有其中某一个单词是红色的,CSS也可以做到这点. 只要这样子设置css文件: p { color: red; } span { /*Wri

使用CSS Tab Designer快速制作CSS导航菜单

随着网页标准化观念深入人心,越来越多的网站采用了CSS架构.CSS架构的网页不但符合W3C标准,并且还非常美观.标准化网页从漂亮的CSS菜单开始,如果你还在犹豫,那么请看看下面这些CSS菜单演示吧,如图1.图2: 图1 CSS导航效果 图2 CSS导航效果 众所周知,CSS菜单都是一段代码.一段代码的编写出来,生成上面这些漂亮菜单,大家一定认为笔者写的很辛苦吧?其实,笔者没有写一句特殊代码,就得到了上面这些CSS菜单,好东西与大家一起分享,笔者不敢藏私,有请幕后功臣--CSS Tab Desig

jQuery CSS()方法改变现有的CSS样式表

  使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: 1$("#61dh a").css('color','#123456'); 2//选择器'$("#61dh a")'表示ID为'#61dh'的元素下的所有链接. 3//.css('color','#123456');表示把颜色设为'#123456' 如果需要改变多个样式属性,可先定