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. 子域名扫描器 - aquatone

    项目地址:https://github.com/michenriksen/aquatone git clone,然后打开 ┌─[root@sch01ar]─[/sch01ar] └──╼ #git c ...

  2. java rest jax-rs 漫谈

    rest是什么 REST是英文RepresentationalState Transfer 的缩写,有中文翻译为“具象状态传输”.REST 这个术语是由 RoyFielding 在他的博士论文< ...

  3. stm32下载程序，拔了调试器不能运行程序解决方案

    A:肯定是只拔了仿真器与电脑连接的那端,然后把另外端依然接在板子上.我说的没错吧 B: 对的,这样就会一直复位吗 这是复位的问题,当JLINK在板子上连接的时候,断电情况下,会一直把RESET拉低,导 ...

  4. 辽宁工程技术大学校园网(深澜) 叠加小水管提速,多wan叠加负载均衡

    教程没啥大用了.可以直接修改路由器为DHCP自动获取ip,然后直接登录校园网. 昨天晚上尝试了下用潘多拉固件多wan叠加网速,负载均衡,算是提高了速度. 转载请注明出处.教程供参考.本教程不是破解教程 ...

  5. Express的路由详解

    Express的路由详解 http://www.jb51.net/article/76203.htm

  6. Linux GCC编译警告：Clock skew detected. 错误解决办法

    今天在虚拟机上用GCC编译一个程序的时候,出现了下面的错误: make: warning: Clock skew detected. Your build may be incomplete 试了ma ...

  7. PHP配置数据库XML文件

    <?php $doc=new DOMDocument('1.0','utf-8'); //new一个dom对象 $doc->load("config.xml"); 加载 ...

  8. while循环 for循环的理解

    不管是while循环还是for循环都隐含着一个if else的结构,就是说,if 条件满足,那么就执行循环体内部的语句,else就做循环体外部的事情. 有一个例子我觉得特别典型,程序内部定义了一个特定 ...

  9. Apache ab命令

    一.简介 ab是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可以对或其它类型的服务器进行压力测试.比如nginx.tomcat.IIS等. 二. ...

  10. 使用mail架包发送邮件javax.mail.AuthenticationFailedException: failed to connect at javax.mail.Service.connec

    这个错误是因为连接不上邮箱服务器导致的,可能有以下几个原因(以网易邮箱为例) 1.当使用第三方登录邮箱时需要有邮箱的授权码,且要开启POP3/SMTP/IMAP:服务 2.在代码中要调用网易邮箱的密码 ...