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

属性 描述 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. day07 Python文件操作

    一,文件操作基本流程 #1. 打开文件,得到文件句柄并赋值给一个变量 f=open('a.txt','r',encoding='utf-8') #默认打开模式就为r #2. 通过句柄对文件进行操作 d ...

  2. 基于Docker的GoldenGate部署

    前言 Docker最近几年异常火爆,主要是因为其方便.快捷.轻量,相对于VM,它不需要占用太多资源,随时可以创建.删除,或在已有image上添加一些软件,再制作成另一个模板image供日后使用.Doc ...

  3. easyUI 创建详情页dialog

    使用easyui dialog先下载jQuery easyui 的压缩包  下载地址http://www.jeasyui.com/download/v155.php 解压后放在项目WebContent ...

  4. BIOS备忘录之EC常用知识点

    BIOS工程师眼中常用的EC知识点汇总: EC的硬件架构 EC硬件结构上主要分为两部分:Host Domain和EC Domain Host Domain就是通过LPC与CPU通信的部分(LPC部分需 ...

  5. 对比PG数据库结构是否一致的方法

    如果版本升级涉及数据库更新,测试时要对比旧版数据库更新后是否和全新安装的是否一致,但是数据库结构很复杂的时候对比就很麻烦,postgre可以使用以下方法对比:pg_dump.exe –h 数据库IP ...

  6. Python sqlalchemy orm 多对多外键关联

    多对多外键关联 注:使用三张表进行对应关联 实现代码: # 创建3个表 配置外键关联 # 调用Column创建字段 加类型 from sqlalchemy import Table, Column, ...

  7. Python文档记录

    Beautiful Soup 4.2.0 文档 Python3网络爬虫开发实战 Python库-requests 文档 Selenium with Python中文翻译文档 http://www.te ...

  8. Always clear download 下载 谷歌浏览器插件

    由于该博文不支持上传压缩包,因此,如有需要always clear download插件的可点击此链接在百度网盘上下载https://pan.baidu.com/s/13wWchis3iKqXkIA5 ...

  9. Thread的中断机制(interrupt)

    先看收集了别人的文章,全面的了解下java的中断: 中断线程 线程的thread.interrupt()方法是中断线程,将会设置该线程的中断状态位,即设置为true,中断的结果线程是死亡.还是等待新的 ...

  10. web前端常见面试题汇总

    一.理论知识 1.1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求,浏览器 ...