官网上关于过渡属性的值：

属性 描述 CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。 3

transition-timing-function  的值 有一下特点：

值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
 
 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
;
;
}
/*布局基本样式 */
ul{
width: 1000px;
height: 600px;
background-color: beige;
margin: 100px auto;
list-style: none;
}
ul li{
width: 150px;
height: 100px;
background-color: pink;
margin-top: 10px;
line-height: 100px;
text-align: center;
/* 添加需要过渡的属性 */
transition-property: margin-left;
/* 添加时间 */
transition-duration: 5s;
}
/* 鼠标移入 ul 添加统一效果 */
ul:hover li{
margin-left: 800px;
}
/* 添加各自的样式效果 */
 
){
transition-timing-function: linear;
}
){
transition-timing-function:ease;
}
){
transition-timing-function: ease-in;
}
){
transition-timing-function: ease-out;
}
){
transition-timing-function: ease-in-out;
}
 
</style>
</head>
<body>
<ul>
<li>liner</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
;
;
}
/*布局基本样式 */
ul{
width: 1000px;
height: 600px;
background-color: beige;
margin: 100px auto;
list-style: none;
}
ul li{
width: 150px;
height: 100px;
background-color: pink;
margin-top: 10px;
line-height: 100px;
text-align: center;
/* 添加需要过渡的属性 */
transition-property: margin-left;
/* 添加时间 */
transition-duration: 5s;
}
/* 鼠标移入 ul 添加统一效果 */
ul:hover li{
margin-left: 800px;
}
/* 添加各自的样式效果 */
 
){
transition-timing-function: linear;
}
){
transition-timing-function:ease;
}
){
transition-timing-function: ease-in;
}
){
transition-timing-function: ease-out;
}
){
transition-timing-function: ease-in-out;
}
 
</style>
</head>
<body>
<ul>
<li>liner</li>
<li>ease</li>
<li>ease-in</li>
<li>ease-out</li>
<li>ease-in-out</li>
</ul>
</body>
</html>

2D过渡模块的其他属性的更多相关文章

  1. css过渡模块和2d转换模块

    今天,我们一起来研究一下css3中的过渡模块.2d转换模块和3d转换模块 一.过渡模块transition (一)过度模块的三要素: 1.必须要有属性发生变化 2.必须告诉系统哪个属性需要执行过渡效果 ...

  2. CSS学习笔记-过渡模块

    过渡模块:    1.过渡三要素        1.1必须要有属性发生变化        1.2必须告诉系统哪个属性需要执行过渡效果        1.3必须告诉系统过渡效果持续时长    2.格式: ...

  3. CSS学习笔记-05 过渡模块的基本用法

    话说 1对情侣两情相悦,你情我愿.时机成熟,夜深人静...咳 ,如果就这么直奔主题,是不是有点猴急,所以,还是要来点前戏@. 铛 铛, 这个时候 过渡模块出现了. 划重点: 上代码: <!DOC ...

  4. 前端学习笔记之CSS过渡模块

    阅读目录 一 伪类选择器复习 二 过渡模块的基本使用 三 控制过渡的速度transition-timing-function 四 过渡模块连写 一 伪类选择器复习 注意点: #1 a标签的伪类选择器可 ...

  5. CSS动画之过渡模块

    :hover伪类选择器可以用于所有的选择器(只有在悬停时,执行选择器的属性)CSS3中新增过渡模块:transition property(属性)duration(过渡效果花费的时间)timing-f ...

  6. 1+X证书学习日志——css 2D&过渡

    css 位移常用属性 transform:translate(x,y): transform:translateX(); transform:translateY(); 旋转属性 2d旋转: tran ...

  7. CSS3过渡、变形和动画

    1.CSS3过渡 所谓CSS3过渡,就是使用CSS3让元素从一种状态慢慢转换到另一种状态.如鼠标的悬停状态就是一种过渡.如下例子: #content a{     text-decoration: n ...

  8. CSS3 过渡、变形和动画

    一.我们来给按钮增加一个悬停效果:#content a:hover {border: 1px solid #000000;color: #000000;text-shadow: 0px 1px whi ...

  9. a标签伪类选择器+过度模块

    a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的. 2.格式: 1):link 修改从未被访问过状态下的样式. 2):visited 修改被访问 ...

随机推荐

  1. ReportViewe调用Reporting Services报表时报错Session超时

    序列化问题加上[Serializable]即可 /// <summary> /// 报表身份授权重写 /// </summary> [Serializable] public ...

  2. xshell 利用密钥登录

    第一步:新建用户密钥 第二步:选择加密方式,密钥长度越长越安全 第三步:设置密钥名称和密码(密码可为0,这里是密钥的密码非服务器密码) 第四步:保存公钥到本地 第五步:导出私钥到本地 第六步:将公钥和 ...

  3. Django常见问题集

    django2.0发行文档说,django2.0最后一个支持的是python3.4+... 所以,还在用python2.7的同学只能手动指定版本下载了 pip2 install django==1.8 ...

  4. 如何利用cURL和python对服务端和web端进行接口测试

    工具描述 cURL是利用URL语法在命令行方式下工作的文件传输工具,是开源爱好者编写维护的免费工具,支持包括Windows.Linux.Mac等数十个操作系统,最新版本为7.27.0,但是我推荐大家使 ...

  5. STATS 326 Applied Time Series

    STATS 326Applied Time SeriesASSIGNMENT THREEDue: 2 May 2019, 11.00 am(Worth 6% of your final grade)H ...

  6. Guitar Pro里的编谱方式怎么用？

    今天来教大家如何使用Guitar Pro中的编谱方式来让我们的乐谱更加美观整齐耐看,我们一起get起来吧! 相信我们每一个人在使用Guitar Pro进行编曲创作时,都会碰到这种情况,在乐谱上,会看到 ...

  7. 尚硅谷面试第一季-17Redis 在项目中的使用场景

    数据类型 使用场景 String 比如说 ,我想知道什么时候封锁一个IP地址.Incrby命令 Hash 存储用户信息[id,name,age] Hset(key,field,value) Hset( ...

  8. Learning-Python【28】：基于TCP协议通信的套接字

    什么是 Socket Socket 是应用层与 TCP/IP 协议通信的中间软件抽象层,它是一组接口.在设计模式中,Socket 其实就是一个门面模式,它把复杂的 TCP/IP 协议族隐藏在 Sock ...

  9. ubuntun 18.04 安装和配置mysql数据库

    一:更新镜像源 sudo apt-get update 二:下载数据库 sudo apt-get install mysql-server-5.7 sudo apt-get install mysql ...

  10. 【linux总结】zsl

    extundelete [root@xuegod63 ~]# lsof -p 43641 #一般用于查看木马进程,在读哪些文件 [root@xuegod63 ~]# lsof -i :22 #用于查看 ...