总结CSS3新特性(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 类似;
Transition-timing-function:
设定过渡动画的曲线,这里是W3School的示例,里边用到了是几个常用的,浏览器里内置的几种动画曲线,还可以通过cubic-bezier(n,n,n,n)来进行定制,n为0-1之间的值;
挺全的一个缓动函数集合,默认不设置时,为ease,慢速开始,然后变快再慢速结束;
Transition-delay:
设定动画开始前的等待时间(默认为0,无延迟);
总结:
使用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: 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过渡
缓动函数集合
总结CSS3新特性(Transition篇)相关推荐
- 总结CSS3新特性(选择器篇)
CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p {color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth- ...
- CSS3新特性总结及CSS组件、特效汇总
本文分2部分: 之前写的CSS3新特性详解篇,共6篇博文总结: 常见的一些CSS组件.效果汇总(不包括BootStrap等前端框架已实现的CSS组件): 一.CSS3新特性总结 1.CSS3选择器.边 ...
- HTML5和CSS3新特性(完整版)
css3新特性 选择器 背景和边框 文本效果 2D/3D 转换 - 变形(transform).过渡(transtion).动画(animation) 1.选择器 :last-child /* 选择元 ...
- Html5、CSS3新特性
h5的新特性? 1.新增一些语义化标签 <article> <section> <aside><header> <footer><n ...
- CSS3新特性——新增选择器,2D/3D转换,动画
CSS3新特性--新增选择器,2D/3D转换,动画 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
- web前端 --- CSS(04) -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
- 山东标梵Biaofun详解CSS3新特性
CSS3 新特性 CSS 盒模型 设置一个元素的背景颜色,背景颜色会填充哪些区域 margin/padding 设置百分比是相对谁的 link 和 @import 的区别 CSS 选择器的解析规则 C ...
- CSS3新特性(摘要)
目录 CSS3 简介 CSS3规则 @media @font-face @keyframes CSS3 函数 rgba linear-gradient repeating-linear-gradien ...
- Html5与CSS3新特性
H5新特性 新增的语义化标签 <header> : 头部标签 <nav> : 导航标签 <article> : 内容标签 <main> : 主体标签 & ...
最新文章
- LeetCode简单题之统计匹配检索规则的物品数量
- Confluence 6 MySQL 输入你的数据库细节
- php xorcrevasse,XorEncrypt
- 用Redis快速实现BloomFilter!
- Linux基础:Shell脚本学习
- chrome的全局搜索快捷键
- R语言:预测算法常用包总结
- 浅谈C++函数的参数
- 大厂必备!不断提升自己创造溢价的能力
- linux 文件的组织,Linux文件组织和目录结构
- 基于SpringBoot的开源免费微信管家平台,Jeewx-Boot 1.0 版本发布
- 曲率多项式转换为直角坐标系
- 谷歌搜索将于 2019 年年底停止索引任何 Flash 内容
- LINUX SAN 500G重新分区、格式化,后成功恢复数据90%
- 基于深度学习的目标检测
- c语言输入字符输出数字,C语言——输入一个字符串,将连续数字字符转换为数字...
- 杭电(杭州电子科技大学)可视计算基础大作业:绝地求生吃鸡预测
- Vagrant ssh permission denied
- 桌面新建文件夹不显示缩图_如何在Windows 10桌面上创建不可见的文件夹
- Required Remainder