ease：

1、ease：（逐渐变慢）默认值

2、linear：（匀速）

3、ease-in：(加速)

4、ease-out：（减速）

5、ease-in-out：（加速然后减速）

6、cubic-bezier

如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{margin:0; padding: 0;}

        .icon_down{ width: 0; height: 0; border-left:20px solid transparent; border-right: 20px solid transparent; border-top:20px solid #B03939; transition: all .1s ease-in 0ms; margin:50px auto; cursor: pointer; }

        .icon_down:hover{ transform: rotate(180deg);}

    </style>

</head>

<body>

    <div class="icon_down"></div>

</body>

</html>

效果图：鼠标经过旋转180度，

例子2：

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div

{

width:100px;

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

效果图：

鼠标经过后

CSS3 transition 属性——逐渐变慢/匀速/加速/减速/加速然后减速的更多相关文章

  1. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  2. css3 transition属性实现3d动画效果

    transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动画都可以用这个属性实现,只能说这个属性是在是太强大啦,本人在学习次属性之后才知道自己对css3的认识还是偏少, ...

  3. css3——transition属性和opacity属性

    [transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time :    规定完成过 ...

  4. [web前端] css3 transition属性实现3d动画效果

    cp from : https://www.cnblogs.com/chrxc/p/5123375.html transition属性是一个很强大的3d动画属性,我动手试了一下,很多在网上很火的网页动 ...

  5. CSS3 transition 属性过渡效果 详解

    CSS3 transition 允许 CSS 元素的属性值在一定的时间区间内平滑地过渡.我们可以在不使用 Flash 动画或 JavaScript 的情况下,在元素从一种样式变换为另一种样式时为元素添 ...

  6. css3 transition属性变化与animation动画的相似性以及不同点

    下面列子中的2个图片的效果. http://zqtest.e-horse.cn/DongXueImportedCar/assets/mouseOverAnimate.html 第一个为transiti ...

  7. CSS3 transition 属性

    transition是css3中新添加的特性,在W3C标准中是这样描述的:“css的transition允许css的属性值在一定的时间内从一个状态平滑的过渡到另一个状态.这种状态可以在鼠标单击.获得焦 ...

  8. CSS3 transition 属性 过渡效果

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...

  9. css3学习之--transition属性（过渡）

    一.理解transition属性 W3C标准中对CSS3的transition是这样描述的: CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦 ...

随机推荐

  1. Py修行路 python基础 （二十一）logging日志模块 json序列化 正则表达式（re）

    一.日志模块 两种配置方式:1.config函数 2.logger #1.config函数 不能输出到屏幕 #2.logger对象 (获取别人的信息,需要两个数据流:文件流和屏幕流需要将数据从两个数据 ...

  2. C++深度解析教程学习笔记（4）C++中的新成员

    1. 动态内存分配 (1)C++通过 new 关键字进行动态内存申请,是以类型为单位来申请空间大小的 (2)delete 关键字用于内存释放 ▲注意释放数组时要加[],否则只释放这个数组中的第 1 个 ...

  3. java多线程编程核心技术-笔记

    一.第一章 1.自定义线程类中实例变量针对其他线程有共享和不共享之分,自定义线程中的变量,如果是继承自thread类,则每个线程中的示例变量的更改,不影响其他线程2.当多个线程去访问一个局部变量是会产 ...

  4. Minimum Sum of Array（map)

    You are given an array a consisting of n integers a1, ..., an. In one operation, you can choose 2 el ...

  5. telnet测试端口是否正常打开

    点击计算机的开始菜单-->运行 ,输入CMD命令,然后确定.打开cmd命令行.   输入telnet测试端口命令: telnet IP 端口 或者 telnet 域名 端口 回车   如果端口关 ...

  6. HTML中 .clearfix:after的使用

    将一个<div>标签随着内容的增加而增加

  7. Quick Find

    --------------------siwuxie095                                 Quick Find         这里介绍并查集的一种实现思路:Qui ...

  8. 反射01 Class类的使用、动态加载类、类类型说明、获取类的信息

    0 Java反射机制 反射(Reflection)是 Java 的高级特性之一,是框架实现的基础. 0.1 定义 Java 反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对 ...

  9. 1-在eclipse里面配置python（最详细）

    最近有时间打算学下python,打算学当然是得先搞好开发工具,网上搜一波,发现许多ide,居然可以在eclipse下写python,由于最近一直在搞java,所以已经装了eclipse,所以打算就在e ...

  10. Luogu 2597 [ZJOI2012]灾难

    BZOJ 2815. 解法还是挺巧妙的. 放上写得很详细很好懂的题解链接  戳这里. 一个物种$x$如果要灭绝,那么沿着它的入边反向走走走,一定可以走到一个点$y$,如果这个点$y$的物种灭绝了,那么 ...