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

属性 描述 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. noip2016海港

    题目描述 Description 小K是一个海港的海关工作人员,每天都有许多船只到达海港,船上通常有很多来自不同国家的乘客. 小K对这些到达海港的船只非常感兴趣,他按照时间记录下了到达海港的每一艘船只 ...

  2. android layout文件优化

    性能优化1--UI优化 1.使用系统为我们提供了几个抽象的标签①include:重用include中layout属性指定一个外部布局文件,通过该方式则不需要把这个布局文件在该代码中重复的写一遍了. 若 ...

  3. 文件夹放到VS2015显示不出来

    在该项目中,点这个按钮 , 会显示没有包括进项目的文件 在要包括的文件上右键--包括在项目中即可 同理也可以从项目排除

  4. 【shell】wc命令

    wc是一个非常方便的文本处理命令,有两个功能: 统计文件的行数 统计文件的字符数 那么就有三个参数: -l :只统计行数 -w: 统计英文单词数 -m: 统计字符数 default :行数+单词数 默 ...

  5. flutter stack

    import 'package:flutter/material.dart'; void main() { runApp(MaterialApp(home: new MyApp())); } clas ...

  6. 深度解析vuex

    1.什么是vuex? vuex 是一个专为 Vue.js 应用程序开发的状态管理模式(通俗一点的说Vuex就是存储数据的工具,类似于cookie.sessionStorage.localStorage ...

  7. 在res文件下新建文件夹

    今天遇到了在res下新建文件夹的问题,无论是是Android studio中直接建还是在下载Android studio的物理地址中直接新建一个文件夹,在树结构中始终没有见到新建的文件,原来需要把An ...

  8. devm_kzalloc【转】

    本文转载自:https://blog.csdn.net/liuhuahan/article/details/42145507 看内核代码的时候看到这个函数不理解它的具体作用然后就上网上查,但是网上只查 ...

  9. TabBar + TabBarView导航风格

    import 'package:flutter/material.dart'; import 'News.dart'; import 'Video.dart'; import 'Chat.dart'; ...

  10. P1903 [国家集训队]数颜色 / 维护队列

    思路 带修莫队的板子 带修莫队只需要多维护一个时间的指针即可,记录一下每个询问在第几次修改之后,再回退或者前进几个修改操作 排序的时候如果a.l和b.l在一个块里,就看r,如果a.r和b.r在一个块里 ...