过渡 - transition
过渡 - transition
是变形transfrom
其中一种效果,定义为一种状态过渡到另一种状态的过程,今天学习到css3动画,特此记录下过渡的使用和一些效果。
实例1:
<div class="box"></div>
<p>鼠标移动到 .box 元素上,查看过渡效果。</p>
.box{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
transition-duration: 1s; /*花费时间*/
transition-property: all;
transition-delay:0s; /* 延迟 */
transition-timing-function: linear; /*匀速*/
}
.box:hover{
width:200px;
background: #00FFFF;
}
效果图:
注:当指针移出元素时,它会逐渐变回原来的样式。
实例2:
在例子中使用所有过渡属性 - 使用简写
.box{
.box{
width: 100px;
height: 100px;
background: red;
margin: 0 auto;
transition:1s all 0s linear;
}
效果图还是这样:

下面是我的简单总结
总:
transition:2s all;
transition:2s 1s all linear;
注:1s是延迟 linear过渡的属性
分开写:
1.transition:2s; 给它本身+这个过渡的属性:所需时间
2.transition-timing-function:linear; 匀速
5.transition: -delay timing-function -duration;
transition-timing-function 属性
值 | 描述 |
---|---|
linear | 匀速 |
ease | 慢快慢 |
ease-in | 慢开始 |
ease-out | 慢结束 |
ease-in-out | 慢开始和结束 |
参考文章:
过渡 - transition的更多相关文章
- 深入理解CSS过渡transition
× 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3之过渡Transition
CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...
- CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换
边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...
- css过渡transition
定义 过渡transition是一个复合属性,包括transition-property.transition-duration.transition-timing-function.transiti ...
- css过渡transition属性
一.CSS3 过渡 (一).CSS3过渡简介 CSS3过渡是元素从一种样式逐渐改变为另一种的效果. 实现过渡效果的两个要件: 规定把效果添加到哪个 CSS 属性上 规定效果的时长 定义动画的规则 过渡 ...
- CSS3(2)--- 过渡(transition)
CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...
- 深入css过渡transition
通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果.过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方. 过渡transitio ...
- css3过渡transition
过渡:transition transition:transition-property/duration/timing-function/delay的缩写. transition : <'tr ...
随机推荐
- 测试常用的sql语句
1.查询:select * from table_name where 条件语句; SELECT * from sms_runwater WHERE message LIKE "%自有支付% ...
- SparkSQL Adaptive Execution
转自 https://mp.weixin.qq.com/s/Oq9L3Cmc-8G9oL8dvZ5OHQ 1 背景 本文介绍的 Adaptive Execution 将可以根据执行过程中的中间数据优化 ...
- idea设置docker远程插件
简介 docker都是通过命令来操作容器,使用idea插件可以减少重复命令输入等. 使用步骤 Idea内安装插件 打开Idea,Preferences | Plugins 进入插件安装界面,在搜索框中 ...
- 【乘风破浪】Android系统启动流程整理
前言 对于一个Android应用层开发者来说,了解Android系统的启动流程对理解Android系统有很大的帮助.这其中包含了大量的细节,而且前面很多步骤包含了C/C++实现的native层逻辑,作 ...
- [原创] Nginx1.13版本reload过程对TCP包影响的测试
Nginx1.13版本reload过程中各项连接情况和状态的测试.测试Nginx1.13 Reload过程中,对客户端和服务器的TCP层面的包影响. 1)对客户端开启长连接,服务端开启/不开启 ...
- 关于python的特殊方法
最近在阅读<流畅的python>这本书,在第一章中作者就提到了几个python中的特殊方法,代码入下: class FrenchDuck: ranks = [str(n) for n in ...
- .NET Core ASP.NET Core Basic 1-2 控制反转与依赖注入
.NET Core ASP.NET Core Basic 1-2 本节内容为控制反转与依赖注入 简介 控制反转IOC 这个内容事实上在我们的C#高级篇就已经有所讲解,控制反转是一种设计模式,你可以这样 ...
- HDU-3478Catch二分图的否命题
HDU-3478Catch 题意:考虑Thief能否: 由于我推着推着就想到必须要三点可以互通,和二分图的结论正好相反,所以就试了一发, 真没想到thief的初始位置是不用考虑的. 下面是ac代码: ...
- codeforces 486 D. Valid Sets(树形dp)
题目链接:http://codeforces.com/contest/486/problem/D 题意:给出n个点,还有n-1条边的信息,问这些点共能构成几棵满足要求的树,构成树的条件是. 1)首先这 ...
- jQuery - 03. each、prevaAll、nextAll、获取属性、修改属性attr/val/text()、jq.height/width、offset()./position()./scrol Left/Top 、事件绑定bind、delegate、on、事件解绑、事件对象、多库共存
each 方法 $ ( selector).each(function( index,element) { } ); 参数一表示当前元素在所有匹配元素中的索引号 参数二表示当前元素(DOM对象) ...