<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:100px;

background:blue;

transition:width 2s;

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

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

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

}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div></div>

<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

http://www.w3school.com.cn/tiy/t.asp?f=css3_transition

<!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px;

height:50px;

background:red;

color:white;

font-weight:bold;

transition:width 2s;

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

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

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

}

#div1 {transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Firefox 4: */

#div1 {-moz-transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {-moz-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-moz-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-moz-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-moz-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Safari and Chrome: */

#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Opera: */

#div1 {-o-transition-timing-function: cubic-bezier(0,0,0.25,1);}

#div2 {-o-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-o-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-o-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-o-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

div:hover

{

width:300px;

}

</style>

</head>

<body>

<div id="div1" style="top:100px">linear</div>

<div id="div2" style="top:150px">ease</div>

<div id="div3" style="top:200px">ease-in</div>

<div id="div4" style="top:250px">ease-out</div>

<div id="div5" style="top:300px">ease-in-out</div>

<p>请把鼠标指针移动到红色的 div 元素上，就可以看到过渡效果。</p>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

</body>

</html>

http://www.w3school.com.cn/tiy/t.asp?f=css3_transition-timing-function3

CSS3 transition 属性 过渡效果的更多相关文章

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

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

  2. css3 transition属性

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

  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属性实现3d动画效果

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

  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 属性——逐渐变慢/匀速/加速/减速/加速然后减速

    ease: 1.ease:(逐渐变慢)默认值 2.linear:(匀速) 3.ease-in:(加速) 4.ease-out:(减速) 5.ease-in-out:(加速然后减速) 6.cubic-b ...

  9. CSS3使用transition属性实现过渡效果

    transition属性目的是让css的一些属性(如background)的以平滑过渡的效果出现.它是一个合并属性,是由以下四个属性组合而成: transition-property:设置应用过渡的C ...

随机推荐

  1. Jira安装部署

    一.先安装JDK JDK1.6下载:http://www.java.net/download/jdk6/6u10/promoted/b32/binaries/jdk-6u10-rc2-bin-b32- ...

  2. [freemarker篇]04.简单介绍-基本数据类型

    好几天没有更新博客了,最近一顿乱七八糟的忙!今天简单更新第四章,这里只能说是简单介绍,因为权威的还是需要看Freemarker的官方中文手册! 好几天没有更新博客了,最近一顿乱七八糟的忙!今天简单更新 ...

  3. Unity之定时调用

    1.Invoke(string methodName,float time) 在一定时间调用methodName函数 using UnityEngine; using System.Collectio ...

  4. Unity之屏幕画线

    using UnityEngine;using System.Collections; public class DrawRectangle : MonoBehaviour { public Colo ...

  5. asp.net MVC 如何隐藏 Response Header 版本号

    根据借楼最少资源原则,有时候MVC需要隐藏自己的版本号,其实这里也是比较简单的,只需要在Global.ascx 的Application_Start()中添加一行代码既可 添加为  MVCHandle ...

  6. 图片放大镜(像淘宝浏览商品一样)JS操作

    × 目录 [1]布局 [2]JS操作-获得元素 [3]大图及面板 [4]面板随着鼠标移动 [5]控制面板移动范围 [6]大图动起来 [7]代码 ---------------------------- ...

  7. ado模版不会自动生成

    从数据库中更新模版的时候,其他文件都更新了,只有tt文件下的cs文件是没有更新的,没有添加也没有修改,在网上找了很久都没有这方面的信息. 其实只要删掉,重建一个ado模版就好.根本就不需要纠结.最后还 ...

  8. Javascript之数据执行原理探究

    Javascript在Web服务器端执行原理: 1.客户端请求数据,即我们在上网时在地址栏中输入某个网址,浏览器接收到数据之后,向远程web服务器发送请求报文. 2.web服务器响应请求,web服务器 ...

  9. Android之图片滑动与显示

    先在Transitions中插入ImageSwitcher package com.example.Galleryphotoshow; import com.example.Galleryphotos ...

  10. 点击文字label同时选中checkbox radio

    在做网页的时候一般会有一个需求:点击一段文字信息的同时选中某个checkbox 旧处理方式是在这段文字上加上点击事件触发checkbox的选中事件 //jq中://选中 $("#ID&quo ...