ease：

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

2、linear：（匀速）

3、ease-in：(加速)

4、ease-out：（减速）

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

6、cubic-bezier

如：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{margin:0; padding: 0;}
  8.         .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; }
  9.         .icon_down:hover{ transform: rotate(180deg);}
  10.     </style>
  11. </head>
  12. <body>
  13.     <div class="icon_down"></div>
  14. </body>
  15. </html>

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

例子2：

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

  1. div
  2. {
  3. width:100px;
  4. transition: width 2s;
  5. -moz-transition: width 2s; /* Firefox 4 */
  6. -webkit-transition: width 2s; /* Safari 和 Chrome */
  7. -o-transition: width 2s; /* Opera */
  8. }

效果图：

鼠标经过后

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. mysql枚举类型与集合类型

    枚举类型与集合类型 字段的值只能在给定范围中选择,如单选框,多选框 enum 单选 只能在给定的范围内选一个值,如性别 sex 男male/女female set 多选 在给定的范围内可以选择一个或一 ...

  2. HADOOP的API简单介绍

    public class HdfsClient { FileSystem fs = null; @Before public void init() throws Exception { // 构造一 ...

  3. leetcode832

    vector<vector<int>> flipAndInvertImage(vector<vector<int>>& A) { vector& ...

  4. Super Jumping! Jumping! Jumping（最大递增子序列的和）

    Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very popular in HDU. May ...

  5. Hibernate 实体对象三种状态 ：自由，持久，游离

    实体对象的状态及转化: 有了上面关于Hibernate缓存的知识,我们再来介绍实体对象的状态就非常容易理解了. A:自由态对象: 当我们通过Java的new关键字来生成一个实体对象时,这时这个实体对象 ...

  6. fpga中wire和reg的区别

    wire表示直通,即只要输入有变化,输出马上无条件地反映:reg表示一定要有触发,输出才会反映输入.wire表示直通,即只要输入有变化,输出马上无条件地反映:reg表示一定要有触发,输出才会反映输入. ...

  7. NetworkView

    [游戏Server中Server的类别] There are two common and proven approaches to structuring a network game which ...

  8. Linux ping不通外网

    在linux中ping www.baidu.com 无法ping通,可能原因是DNS没配置好 方法一: 修改vi /etc/resolv.conf  增加如下内容: nameserver 114.11 ...

  9. git获取网上的项目

    这里是从coding.net上下载项目至本地phpstorm并配置好相关环境. 这里url地址正是项目路径.获取的地方是: 下面那个url直接复制粘贴. 自己选择一个目录,然后clone. 下面便是前 ...

  10. 【总结整理】webGIS学习thinkGIS（四）WebGIS中通过行列号来换算出多种瓦片的URL 之离线地

    http://www.thinkgis.cn/topic/541a5319da8db186fd06e097 1.前言 在前面我花了两个篇幅来讲解行列号的获取,也解释了为什么要获取行列号.在这一章,我将 ...