大厂前端带来css3动画transition的使用和介绍全新认识动画
CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。在transition出现之前css是没有过渡效果的(时间轴),也就是所有的属性的变化都是即时完成。
transition是由4个属性的合体简写:它们分别是:
ransition-property – 过渡的CSS属性的名称,例如:opacity。
transition-duration – 定义过渡效果花费的时间。默认值为 0。
transition-timing-function – 转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。
transition-delay -过渡效果何时开始。默认是 0。
实例:
效果:鼠标移动到div上,停留2秒后宽度由100px经1秒的时间变化到200px
<style>
div{
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
-moz-transition:width 1s linear 2s;/* Firefox 4 */
-webkit-transition:width 1s linear 2s;/* Safari and Chrome */
-o-transition:width 1s linear 2s;/* Opera */
}
div:hover{
width:200px;
}
</style>
由于transition是4中属性的简写,因此也可以写为:
div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}
办公资源网址导航 https://www.wode007.com
transition的使用注意
1、目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。
2、不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果。
3、transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。
transition的局限
1、transition需要事件触发,所以没法在网页加载时自动发生。
2、transition是一次性的,不能重复发生,除非一再触发。
3、transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
4、一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
5、CSS Animation就是为了解决这些问题而提出的。
大厂前端带来css3动画transition的使用和介绍全新认识动画的更多相关文章
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- 前端:css3的过渡与动画
一.css3过渡知识 (一).概述 1.CSS3过渡是元素从一种样式逐渐改变为另一种的效果. 2.实现过渡效果的两个要件: 规定把效果添加到那个css属性上. 规定效果时长 定义 ...
- css3,transition,animation两种动画实现区别
我们为页面设置动画时,往往会用到transition还有animation以及transfrom属性或者用到js. 其实通常情况下,对于使用js我们更加倾向于使用css来设置动画. transfrom ...
- HTML 学习笔记 CSS3(过度 transition)
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.请把鼠标移动到下面的元素上: 先看一下这个代码 实现旋转放大的效 ...
- web前端开发:css3实现loading
web前端开发:css3实现loading 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE ...
- CSS3之transition&transform
参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...
随机推荐
- jsp页面用DBHelper实现简单的登陆验证
首先我们需要写一个简单的登陆页面login.jsp,然后用from表单提交给index.jsp页面.在index.jsp页面通过DBHelper连接数据库判断账号和密码,如果密码正确则显示登陆成功. ...
- Python 中的类的继承
class parent(object): def override1(self): print("Parent") class child(parent): def overri ...
- C#数据结构与算法系列(二):稀疏数组(SparseArray)
1.介绍 当一个数组中大部分元素为0,或者为同一个值的数组时,可以使用稀疏数组来保存该数组. 稀疏数组的处理方法是: 1.记录数组一共有几行几列,有多少个不同的值 2.把具有不同值的元素的 ...
- 综合练习: PIVOT、UNPIVOT、GROUPING SETS、GROUPING_ID_1
综合练习: PIVOT.UNPIVOT.GROUPING SETS.GROUPING_ID 问题1:Desired output: empid cnt2007 cnt2008 cnt2009 ---- ...
- Linux下搭建mysql
[准备环境] Linux centos7 [mysql安装步骤] 1.首先确定centos版本 cat /etc/redhat-release 2.yum安装 yum -y install mar ...
- 4.WebPack-Loader
一.什么是Loader WebPack默认只"认识"以*.js结尾的文件,如果想处理其他类型的文件,就必须添加Loader,有各种各样的Loader,每个Loader可处理不同类型 ...
- 完美解决asp.net core 3.1 两个AuthenticationScheme(cookie,jwt)共存在一个项目中
内容 在我的项目中有mvc controller(view 和 razor Page)同时也有webapi,那么就需要网站同时支持2种认证方式,web页面的需要传统的cookie认证,webapi则需 ...
- vwware虚拟机网卡的三种模式
这里在虚拟机中必须要保证右上角的两个勾选上 三种模式:简单一个比如宿主机器直接连接路由器上网,那虚拟机和宿主机器是一定的可以上外网,相当于虚拟机直接连接在路由器上面,虚拟机需要配置可以上外网的IP地址 ...
- 【故障公告】阿里云 RDS 实例 CPU 100% 故障引发全站无法正常访问
非常抱歉,今天凌晨 3:20~8:30 左右,我们使用的阿里云 RDS 实例 SQL Server 2016 标准版突然出现 CPU 100% 故障,造成全站无法正常访问,由此给您带来巨大的麻烦,请您 ...
- 在树莓派上读取DHT11温湿度传感器-python代码实现及常见问题(全面简单易懂)
最近由于自己的课题需要,想要用在树莓派上使用DHT11温湿度传感器来读取空气中温湿度,遇到了几个问题,解决之后也对之前的知识进行了回顾,总结,特整理如下,希望能给也在学习树莓派的小伙伴们带来一些帮助. ...