过渡：transition

transition：transition-property/duration/timing-function/delay的缩写。
　　　　transition ：
<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>
[, ... ];

　　　　transition-property：变换的属性名。
　　　　　　none、all、一个或多个<property>(逗号分隔)。

　　　　transition-duration：持续时间。单位s或ms。
　　　　　　<time>默认为0。无过渡效果。

　　　　transition-timing-function：过渡效果的速度曲线。
　　　　　　linear：匀速，等于cubic-bezier(0,0,1,1)
　　　　　　ease：慢快慢，等于cubic-bezier(0.25,0.1,0.25,1)
　　　　　　ease-in：以慢开始，等于cubic-bezier(0.25,0.1,0.25,1)
　　　　　　ease-out：以慢结束，等于cubic-bezier(0,0,0.25,1)
　　　　　　ease-in-out：以慢开始和结束，等于cubic-bezier(0.42,0,0.58,1)
　　　　　　cubiz-bezier(n,n,n,n)：【三次贝塞尔】在cubiz-bezier函数中定义自己的值，0~1。

transition-delay：指定开始时间。默认0。
　　　　　　逗号分隔多个属性的延迟时间。
　　　　　　-moz-transition: color 0.3s ease-out 2s;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过度</title>
<style type="text/css">
/*案例*/
.t{
width:200px;
height:300px;
background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s,height 2s; /* Firefox 4 */
-webkit-transition:width 2s,height 2s; /* Safari and Chrome */
-o-transition:width 2s,height 2s;/* Opera */
}
.t:hover{ width:300px; height:200px; }
/*测试 transition-timing-function*/
.bwh{width:100px;height:50px;background:#cccccc;border:1px solid red;}
.div1{ transition:width 2s; transition-timing-function: linear;/*规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）*/}
.div2{ transition:width 2s; transition-timing-function: ease-in;/*规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。*/}
.div3{ transition:width 2s; transition-timing-function: ease;/*规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1))*/}
.div4{ transition:width 2s; transition-timing-function: ease-out;/*规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。*/}
.div5{ transition:width 2s; transition-timing-function: ease-in-out;/*规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）*/}
.bwh:hover{width:400px;}

/*测试透明度*/
.d{ width:200px;
height:100px;
background:black;
transition:opacity 3s;
-moz-transition:opacity 3s; /* Firefox 4 */
-webkit-transition:opacity 3s; /* Safari and Chrome */
-o-transition: opacity 3s;/* Opera */
}
.d:hover{opacity: 0.1;}
</style>
</head>
<body>
<div class="t"></div>
<div class="d"></div>
<div class="bwh div1"></div>
<div class="bwh div2"></div>
<div class="bwh div3"></div>
<div class="bwh div4"></div>
<div class="bwh div5"></div>
<div class="bwh div6"></div>
</body>
</html>

css3过渡transition的更多相关文章

  1. CSS3 过渡transition 认识

    其实,我一直觉得自己对新知识是以一种抵触的情绪在学习的.因为我总是习惯于将事情想得很复杂,所以也错过了很多美好的东西. 以前觉得CSS3的知识应该是很难的,很难理解的.但是我发现我觉得知识点很难,是因 ...

  2. CSS3 过渡---transition

    过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 过渡动画: 是从 ...

  3. CSS3学习（CSS3过渡、CSS3动画）

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

  4. 【Demo】CSS3 过渡

    CSS3 过渡transition 应用于宽度属性的过渡效果,时长为 2 秒: div { transition: width 2s; -webkit-transition: width 2s; /* ...

  5. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  6. CSS3之过渡Transition

    CSS3中的过渡Transition有四个中心属性:transition-property.transition-duration.transition-delay和transition-timing ...

  7. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  8. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  9. CSS3(2)--- 过渡(transition)

    CSS3(2)--- 过渡(transition) 一.概念 1.什么是过渡 通俗理解 是从一个状态 渐渐的过渡到 另外一个状态. 比如一个盒子原先宽度为100px,当鼠标点击时盒子的宽度变成200p ...

随机推荐

  1. js灵活打印web页面区域内容的通用方法

      我们做网站,经常需要打印页面指定区域的内容,而网上关于这块的说法很多,各种各样的打印控件也不少.但许多打印方案都不怎么好,至少我不喜欢,要么封装复杂,要么难以维护.正好现在的项目也需要用到 ...

  2. linux或者windows下的文件拷贝

    #  上代码 #!/usr/bin/env python # -*- coding:utf-8 -*- import os import shutil import tarfile base_dir ...

  3. nodejs--偏函数

    偏函数的例子,解释--假设有一个参数或变量已经预置的函数A,我们通过调用A来产生一个新的函数B,函数B就是我们说的偏函数 偏函数解决这样的问题:如果我们有函数是多个参数的,我们希望能固定其中某几个参数 ...

  4. AngularJS学习---Routing(路由) & Multiple Views(多个视图) step 7

    1.切换分支到step7,并启动项目 git checkout step- npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代 ...

  5. 通过indexPath找到对应的cell

    在- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath 这个方法中通过 ...

  6. textarea 在不同浏览器高宽不一致的兼容性问题

    在html,很多同学喜欢使用rows.cols,来设置textarea的高宽,却发现,在火狐跟其他浏览器,好像高宽却不一致! 因为这是火狐的一个bug, https://bugzilla.mozill ...

  7. vim基础使用

    vim的常用模式有分为命令模式,插入模式,可视模式,正常模式.本教程中,只需要用到正常模式和插入模式.二者间的切换即可以帮助你完成本指南的学习. 进入方法: vim xxx.xml 正常模式 正常模式 ...

  8. ios调用第三方程序打开文件，以及第三方调用自己的APP打开文件

    1.自己的APP调用第三方打开文件 主要是使用  UIDocumentInteractionController  类   并实现 UIDocumentInteractionControllerDel ...

  9. 【Java学习笔记】<集合框架>定义功能去除ArrayList中的重复元素

    import java.util.ArrayList; import java.util.Iterator; import cn.itcast.p1.bean.Person; public class ...

  10. string.Format , object[] args 使用

    string sql = "insert into TableA values('{0}','{1}','{2}',GetDate(),'{3}' "; sql = string. ...