CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。这个过程可以自定义。

Transition是一个简写属性,四个值(单独使用均加transition-前缀)的顺序:

  property

  duration

  timing-function

  delay

过渡就是在一定时间内完成某属性值的改变,所以,transition-duration一定要设置,因为它默认值为0;

Transition-Property:

要过渡的属性值,只有被指定的属性才会在过度时产生动画效果,可以填all,all为所有可动画属性;

#demo {
width:20px;
height:20px;
background-color:#0080FF;
transition:width 1.5s;
}
#demo:hover {
width:30px;
height:30px;
}

只会对width的改变产生动画效果↓

 

可以选择多个属性的值;

#demo {
width:20px;
height:20px;
background-color:#0080FF;
transition-property:width , height;/*写多个值用逗号分割*/
transition-duration:2s;/*过渡持续时间可以只写一个,也可分别指定,同样用逗号分割*/
}

使用简写时指定多个属性:

#demo {
width:20px;
height:20px;
background-color:#0080FF;
transition:width 2s, height 4s;/*两条定义之间用逗号分割,后两个值为选填.*/
}

使用子属性时需要注意几点:

#demo {
transition-property:width , height , top;
transition-duration:2s , 3s;/*定义时间个数少于属性个数,会再次循环数组*/
}
/*相当于*/
#demo {
transition-property:width , height , top;
transition-duration:2s , 3s , 2s;
}
#demo {
transition-property:width , height;
transition-duration:2s , 3s , 2s;/*定义时间个数多于属性个数,多出的值会被截取*/
}
/*相当于*/
#demo {
transition-property:width , height;
transition-duration:2s , 3s;
}

Transition-duration:

设定过渡持续的时间,可以为秒或毫秒,本人理解为过渡就是通过设置的持续时间结合缓动函数计算相应的属性值改变的曲线;

比如4秒内宽度从100px过渡到200px,简单的分为4帧(假设) 125px-150px-175px-200px;原理应该与animation的from to 类似;

过渡持续2s

过渡持续4s

过渡持续8s

Transition-timing-function:

设定过渡动画的曲线,这里是W3School的示例,里边用到了是几个常用的,浏览器里内置的几种动画曲线,还可以通过cubic-bezier(n,n,n,n)来进行定制,n为0-1之间的值;

挺全的一个缓动函数集合,默认不设置时,为ease,慢速开始,然后变快再慢速结束;

Transition-delay:

设定动画开始前的等待时间(默认为0,无延迟);

鼠标悬浮2s后拉伸

总结:

使用Transition能使页面看上去更富有动感,下面是一个按钮的简单例子;

Hover me Hover me

.demo-button {
border:0px;
background-color:#2aaacb;
position:relative;
padding:0.7em 1.8em;
font-size:1.1em;
border-radius:3px;
margin-right:2em;
color:#fff;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.demo-button:before {
content: "";
z-index:-1;
position: absolute;
width: 100%;
height: 100%;
background-color: #3BD1F8;
top:;
left:;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#transition-demo1:before {
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
#transition-demo1:hover:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
#transition-demo2:before {
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
#transition-demo2:hover:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}

结合transform做的按钮,主要是用到了:before元素,实现这种效果默认时缩小为不可见,hover时还原元素大小,缩放X,Y轴的改变实现了两个不同的button;

本文如有不足或错误,还请指出.共同学习;

部分参考资料:

MDNCSS过渡

MDN使用CSS过渡

W3School_CSS过渡

缓动函数集合

总结CSS3新特性(Transition篇)的更多相关文章

  1. 总结CSS3新特性(Transform篇)

    概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫 ...

  2. 总结CSS3新特性(颜色篇)

    颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数 ...

  3. 总结CSS3新特性(Animation篇)

    动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法: @keyframes name { 0% { to ...

  4. 总结CSS3新特性(选择器篇)

    CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth ...

  5. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  6. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  7. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  8. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  9. HTML5和CSS3新特性

    1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...

随机推荐

  1. 在ssh中利用Solr服务建立的界面化站内搜索---solr2

         继上次匆匆搭建起结合solr和nutch的所谓站内搜索引擎之后,虽当时心中兴奋不已,可是看了看百度,再只能看看我的控制台的打印出每个索引项的几行文字,哦,好像差距还是有点大……        ...

  2. Furatto – 轻量,友好的响应式前端开发框架

    Furatto 是一个基于 Bootstrap & Foundation 的前端开发框架,用于快速开发网站.这个框架采用流行的扁平化设计和响应式设计.除了布局和网格之外,所有的主要元素都有预定 ...

  3. Foundation 5 发布!最先进的响应式前端框架

    数以百万计的设计师和工程师采用 Foundation 作为他们的产品和网站设计的前端框架.Foundation 是第一个响应式.语义化和移动优先的开源框架.最新发布的 Foundation 5 是最先 ...

  4. SQLServer学习笔记系列6

    一.写在前面的话 时间是我们每个人都特别熟悉的,但是到底它是什么,用什么来衡量,可能很多人会愣在那里.时间可以见证一切,也可以消磨一切,那些过往的点点滴滴可思可忆.回想往年清明节过后,在家乡的晚上总能 ...

  5. [python]计算机使用过程中,眼睛强制休息

    前言 现在的电脑族们,在使用电脑的过程中,常常忘记了时间的流逝,要么忙碌在电视剧的观看中,要么忙碌在工作中,要么忙碌在游戏中,往往忽视了对眼睛的正常保护,让眼睛能够在空闲的时候获得足够的休息时间. 我 ...

  6. 实例演示Android异步加载图片(转)

    本文给大家演示异步加载图片的分析过程.让大家了解异步加载图片的好处,以及如何更新UI.首先给出main.xml布局文件:简单来说就是 LinearLayout 布局,其下放了2个TextView和5个 ...

  7. 两种读写配置文件的方案(app.config与web.config通用)

    第一种方法:采用MS现有的ConfigurationManager来进行读写 using System.Configuration; namespace Zwj.TEMS.Common { publi ...

  8. ASP.NET MVC5+EF6搭建三层实例

    一.创建项目解决方案 1.model层.BLL层.Dal层.Common层,都是类库 2.UI层使用MVC5 二.使用EF链接数据库 1.创建实体数据模型 2.选择来自数据库EF设计器 3.创建数据库 ...

  9. Python访问剪切板

    剪切板访问工具 ----pyperclip he purpose of Pyperclip is to provide a cross-platform Python module for copyi ...

  10. RabbitMQ入门教程——路由(Routing)

    绑定( Bindings)   之前的文章中我们已经创建过bindings,代码如下:         channel.QueueBind(queue: queueName, exchange: EX ...