总结CSS3新特性(Transition篇)-阿里云开发者社区

开发者社区> 贾顺名> 正文

总结CSS3新特性(Transition篇)

简介: CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。
+关注继续查看
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能使页面看上去更富有动感,下面是一个按钮的简单例子;

 

 

.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: 0;
  left: 0;
  -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过渡

缓动函数集合

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【OSS 排查方案-7】ossimport 大数据量迁移方案总结
背景: 面临客户不断的将友商的存储数量迁移到阿里云上。ossimport 工具越来越多的暴露在用户端,但是合理的利用 ossimport 工具以及良好的迁移架构数据能否帮助用户高效的快速迁移。但是如果对 ossimport 不熟知,而且迁移架构没有经过测试,反而会降低我们的迁移效率,影响客户的全面战略上云计划安排。
13433 0
ES6 常用新特性简要总结
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
193 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(十四)
Spring Cloud微服务架构设计与开发实战课时2.3—开发Spring Cloud微服务并注册到注册中心 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
80 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(四)
Spring Cloud微服务架构设计与开发实战课时1.4—微服务架构的典型应用场景 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
108 0
开发者学堂课程干货总结——Spring Cloud微服务架构设计与开发实战(九)
Spring Cloud微服务架 Spring Cloud微服务架构设计与开发实战课时1.9—微服务架构中的经典设计模式 。Java Spring Cloud是全球范围内最成熟、最完善、最流行的微服务架构方案体系。被众多的互联网大公司采用,包括阿里巴巴、腾讯、支付宝、网易、IBM、谷歌、京东、百度、滴滴等。电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
89 0
开发者学堂课程干货总结——Java 虚拟机原理(五)
Java 虚拟机原理课时1.5——Dragonwell特性:JWarmup。通过本节课的学习,能够掌握Java 虚拟机原理,学习JNI、类加载器原理、safepoint机制等知识。 电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
70 0
开发者学堂课程干货总结——Java 虚拟机原理(六)
Java 虚拟机原理课时1.6——Dragonwell特性:Wisp。通过本节课的学习,能够掌握Java 虚拟机原理,学习JNI、类加载器原理、safepoint机制等知识。 电子书+视频为同学带来最佳学习效果,文字、课程链接、图谱地址统统为大家放送了哦!
73 0
+关注
贾顺名
JavaScript全沾开发一枚,喜欢研究各种好玩的东西,努力学习GO。 GitHub: https://github.com/jiasm
62
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载