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. MAC 10.6 64wei

    苹果电脑 Mac OS X 10.6 雪豹系统同时支持 32 位和 64 位模式,关于开启 64 位的好处,字太多,本文后半段介绍.下面先说查看你的苹果电脑是否开启了 64 位以及设置苹果电脑 Mac ...

  2. jQueryUI Sortable 应用Demo

    最近工作用需要设计一个自由布局的页面设计.我选了jQuery UI 的 sortable ,可以拖拽,自由排序 使用很方便,写一个demo,做个记录. 第一.单项目自由排序 下图效果 代码段: < ...

  3. ctf中检测和分离隐藏的文件

    使用binwalk检测是否隐藏了文件 root@sch01ar:~# binwalk '/root/桌面/test.jpg' 还藏了一个zip文件,接下来用foremost来分离文件 root@sch ...

  4. 关于Bootstrap的整理和理解

    随着CSS3和HTML5的流行,我们的WEB页面不仅需要更人性化的设计理念,而且需要更酷的页面特效和用户体验.作为开发者,我们需要了解一些宝贵的CSS UI开源框架资源,它们可以帮助我们更快更好地实现 ...

  5. ASP.NET MVC 基于表达式的动态查询

    项目源码地址:https://gitee.com/zhengwei804/DynamicCustomSearch

  6. git配置和使用

    1.注册bitbucket用户登录bitbucket站点https://bitbucket.org/注册一个用户,注册后用户名为linjiqin,邮箱为linjiqin@dkhs.com. 2.Cre ...

  7. 用eclipse+svn插件，上传新项目到svn服务器

    给定trunk路径,https://svn.ws.125089.com/public/nlp/3434index/IndexByModelSolr/trunk/. 其中自己的web项目名字是Index ...

  8. VMware设置及linux静态ip设置

    1.   VMWARE虚拟机NAT模式上网设置 1.1. VM虚拟机设置 1.1.1.   虚拟机全局设置 启动虚拟机选择[虚拟网络编辑器] 如果需要管理员权限点[更改设置],没有提示这忽略这一步 选 ...

  9. 面试题:filter过滤器 listener 监听器 案例有点用

    1.Filter工作原理(执行流程) 当客户端发出Web资源的请求时,Web服务器根据应用程序配置文件设置的过滤规则进行检查,若客户请求满足过滤规则,则对客户请求/响应进行拦截,对请求头和请求数据进行 ...

  10. mybatis学习笔记 spring与mybatis整合

    转载自http://blog.csdn.net/naruto_Mr/article/details/48239357 1.创建web工程,导入spring依赖包与mybatis依赖包,还需要mybat ...