样式表transition属性详解

transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显、渐弱、动画快慢等。transition和transform是两种不同的动画模型。

1.transition过渡属性
transition 属性是一个简写属性,用于设置四个过渡属性:
语法
transition: property duration timing-function delay;

值描述transition-property规定设置过渡效果的 CSS 属性的名称。 transition-duration规定完成过渡效果需要多少秒或毫秒。
transition-timing-function规定速度效果的速度曲线。 transition-delay定义过渡效果何时开始。

all:表示针对所有元素。
none:表示没有元素。
ident:指定CSS属性列表
注:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。transition可以和Transform同时使用。

transition:<过渡属性名称> <过渡时间> <过渡模式>

transition-timing-function 的五种取值:

1.ease 逐渐变慢
2.linear 匀速
3.ease-in 缓慢开始(加速)
4.ease-out 缓慢结束(减速)
5.ease-in-out 缓慢开始,缓慢结束(先加速后减速)
6.cubic-bezier 贝塞尔曲线(matthewlein.com/ceaser)
过渡模式比如宽过渡,高过渡和all过渡。想了解更多网页制作教程知识可登陆e良师益友网。

时间: 2024-10-25 17:48:08

样式表transition属性详解的相关文章

CSS3:Transition属性详解

Transition属性主要是用来对某个CSS属性的变化过程进行控制,官方的介绍是"CSS Transitions allow property changes in CSS values to occur smoothly over a specified duration.".而我个人则简单地理解为"在某个时间段内,平滑地改变某个CSS属性.". Transition又包含了四个子属性,分别为property.duration.timing-function.d

CSS3中的transition属性详解

一.语法 transition: property duration timing-function delay transition属性是个复合属性,她包括以下几个子属性: transition-property :规定设置过渡效果的css属性名称 transition-duration :规定完成过渡效果需要多少秒或毫秒 transition-timing-function :指定过渡函数,规定速度效果的速度曲线 transition-delay :指定开始出现的延迟时间 默认值分别为:al

CSS3中的Transition属性详解(贝赛尔曲线)

transition语法: 1 transition : [<'transition-property'> || <'transition-duration'> || 2 <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || 3 <'transition-duration'> || <'transition-ti

Html5之高级-2 HTML5表单属性(属性介绍、属性详解)

一.属性介绍 属性介绍 - 有一些输入类型要求使用特定的属性才能显示效果,如前面提到过min,max,step. 其他输入类型需要使用一些属性来改进其他性能,或者决定验证过程的重要性.HTML5 标准中再原来的基础上增加了一些新的属性. - Placeholder 属性 - Nultiple 属性 - Autofocus 属性 - Form 属性 二.属性详解 Placeholder 属性 - Placeholder 属性通常用于search输入类型,也可以用在文本域.它表示一个简单提示.单词或

HTML5基础与Meta http-equiv属性详解

HTML基础知识 <!DOCTYPE> 声明帮助浏览器正确地显示网页. <html> 元素定义了整个 HTML 文档. 现代网站都使用meta来声明页面内容的编码格式,我们推荐这种方式 : <meta http-equiv="Content-Type" content="text/html; charset=GBK"> 参考: head元素(head)及其包含的子元素 <head>    定义关于文档的信息. <

css动画-animation各个属性详解(转)

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

jQuery Event.which 属性详解

jQuery Event.which 属性详解 which属性用于返回触发当前事件时按下的键盘按键或鼠标按钮. 对于键盘和鼠标事件,该属性用于确定你按下的是哪一个键盘按键或鼠标按钮. which属性对DOM原生的event.keyCode和event.charCode进行了标准化. 适用的事件类型主要有键盘事件:keypress.keydown.keyup,以及鼠标事件:mouseup.mousedown. 该属性属于jQuery的Event对象(实例). 语法 jQuery 1.1.3 新增该

WPF依赖属性详解

WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency Properties 的使用贯穿样式的使用,数据绑定,动画等等,在刚刚接触Dependency Properties的时候可能觉得有些奇怪,但是,当你了解他要解决的问题的时候,你可能就不觉得奇怪了.Dependency Properties第一个要解决的问题就是控件的属性共享问题,由于大部分的WPF控

MWPhotoBrowser 属性详解 和代理解释

--------0.MWPhoto简单属性解释---------------- MWPhoto *photo = [MWPhoto photoWithURL:[NSURL URLWithString:@"http://farm4.static.flickr.com/3629/3339128908_7aecabc34b.jpg"]]; photo.caption = @"在将photo添加到数组中时,可以在这里设置标题名字"; photo = [MWPhotophot