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

属性 描述 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. Python Logging模块 输出日志颜色、过期清理和日志滚动备份

    # coding:utf-8 import logging from logging.handlers import RotatingFileHandler # 按文件大小滚动备份 import co ...

  2. vue运行时 eslint 报“import/first” WARN deprecated browserslist 问题解决

    vue运行时 eslint 报“import/first”  WARN deprecated browserslist 问题解决 这个信息的意思是导入文件顺序不对,绝对导入应该放在相对导入前面.将绝对 ...

  3. go中 -strconv包的使用

    strconv 包中的函数和方法 // atob.go ------------------------------------------------------------ // ParseBoo ...

  4. ACM题集以及各种总结大全（转）

    ACM题集以及各种总结大全! 虽然退役了,但是整理一下,供小弟小妹们以后切题方便一些,但由于近来考试太多,顾退役总结延迟一段时间再写!先写一下各种分类和题集,欢迎各位大牛路过指正. 一.ACM入门 关 ...

  5. 关于redis集群的问题no reachable node in cluster

    重新启动redis集群时启动失败 n context with path [] threw exception [Request processing failed; nested exception ...

  6. 原生JS实现简易转盘抽奖

    我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...

  7. kettle 连接 Oracle 异常

    场景重现 新安装的 kettle(pdi-ce-7.0.0.0-25) 连接 Oracle 11G R2 报错如下: 解决办法 到 Oracle 官网 JDBC Downloads 下载对应的 ojd ...

  8. Anaconda部署python环境

    Anaconda安装 首先进入到anaconda的官网,如下图所示,会看到anaconda的下载页面: 2.下拉或者单击图中的Windows选项,得到如下图所示的界面,此时可以根据自己需要的版本进行相 ...

  9. JxBrowser之三：常用函数setNetworkDelegate

    1.常用函数setNetworkDelegate,包含对网络传输数据状态的多种监控回调. 2.着重说一下其中的几个函数 BrowserContext browserContext = BrowserC ...

  10. RabbitMq(6) 如何保证消息不丢包

    RabbitMQ一般情况很少丢失,但是不能排除意外,为了保证我们自己系统高可用,我们必须作出更好完善措施,保证系统的稳定性. 下面来介绍下,如何保证消息的绝对不丢失的问题,下面分享的绝对干货,都是在知 ...