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

属性 描述 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. Linux Shell自动交互/人机交互的三种方法

    如果你要学习linux,你可能会遇到Linux Shell自动交互问题,这里将介绍Linux Shell自动交互的解决方法,在这里拿出来和大家分享一下. 一.背景 shell脚本在处理自动循环或大的任 ...

  2. 查看 chrome 浏览器中的 Headers

    查看 chrome 浏览器中的 Headers, Response 信息:

  3. php 数组数字 补零

    $hour_list = range(0,24); foreach($hour_list as $key=>$val){ $hour_list[$key] = str_pad($val, 2, ...

  4. Java连接数据库 #06# SQL与代码分离（精化版本）

    索引 DAO层依赖关系草图 应用示例 接Java连接数据库#05#,对代码进行改进. DAO层依赖关系草图 应用示例(只需3步!) 1.首先定义接口类: package org.sample.shop ...

  5. 剑指offer（23）二叉搜索树的后序遍历序列

    题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则输出Yes,否则输出No.假设输入的数组的任意两个数字都互不相同. 题目分析 1.后续遍历我们可以知道,最右边的是根节 ...

  6. 安装cmake

    $ sudo apt-get install build-essential$ wget http://www.cmake.org/files/v3.11/cmake-3.11.3.tar.gz$ t ...

  7. Python3 tkinter基础 Menu add_radiobutton 单选的下拉菜单

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  8. HDU 6166 Senior Pan（k点中最小两点间距离）题解

    题意:n个点,m条有向边,指定k个点,问你其中最近的两点距离为多少 思路:这题的思路很巧妙,如果我们直接枚举两点做最短路那就要做C(k,2)次.但是我们换个思路,我们把k个点按照二进制每一位的0和1分 ...

  9. Intellj IDEA光标问题

    Intellj IDEA光标为insert状态,无法删除内容以前用得是社区版的IDEA,今天装了14版本的,结果导入项目后,发现打开java文件的光标是win系统下按了insert键后的那种宽的光标, ...

  10. leecode第二百零六题（反转链表）

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...