transition属性是CSS3属性；顾名思义英文为过渡的意思；主要有四个值与其一一对应；分别是property(CSS属性名称)，duration过渡的时长，timimg-function转速曲线函数（其对应着多个已经设置好的值如：ease，ease-in-out 等），delay延时单位为毫秒（延迟多少秒开始过渡）；

首先我们写个简单的div；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>HTML标签</title>

        <link rel="stylesheet" type="text/css" href="css/index.css"/>

    </head>

    <body>
　　　　　　　　

            <div class="CsOuterdiv">

            </div>

    </body>

</html>
/*作者:Alide 2017年11月15日*/

@font-face {

    font-family:MyfirstFont;

    src: url(../css/font/Lucia_BT.ttf);

}

html,

body {

    position: relative;

    width: 100%;

    min-width: 1300px;

    height: 100%;

    min-height: 700px;

    margin: 0px;

    padding: 0px;

    background-color: #F9F9F9;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}

.CsOuterdiv {

    position: relative;

    width: 300px;

    height:200px;

    background-color: deepskyblue;

    /*transition: all 2s ease-in-out 1s;*/

}

.CsOuterdiv:hover{

    /*width: 500px;*/

    /*height: 600px;*/

    /*background-color: blue;*/

}

一般情况下我们为了简便可以用简写：transition的默认值为all 0 ease 0；所以我们在书写CSS代码的时候也要按照这种顺序来。

假设我们有这样的需求，如下；希望通过鼠标hover事件，同时改变该元素的块高背景色；那我们该怎么实现我们的代码呢？

设想代码：这种情况下，看到他只会对最后一个设置的值有过渡效果；那该怎么写呢？【还有一种方法：就是用逗号隔开transition:width 2s ease 3s,height 5s ease 3s;】

ok这样我们就可以实现多个CSS属性同时变换咯。

对就是把前面的宽高背景图改为all，即可，其次我们在观察ease的时候可以看到它是被

 可以自己调节速度。ok，明天见！

今天我们来讨论一下CSS3属性中的transition属性；的更多相关文章

  1. css3动画属性中的transition属性

    一.语法 transition: property duration timing-function delay; 值 描述 transition-property 规定设置过渡效果的 CSS 属性的 ...

  2. CSS3中的Transition属性详解

    w3c标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击.获得焦点.被点击或对元素任何改变中触发, ...

  3. CSS3中的Transition属性详解(贝赛尔曲线)

    transition语法: transition : [<'transition-property'> || <'transition-duration'> || <'t ...

  4. ADOquery属性中cursortype,LockType属性

    ADOquery属性中cursortype属性   ctOpenForwardOnly 向前移动    - — 除了只能在记录集中向前移动以外,其它的和动态游标类似.      ctKeyset 键集 ...

  5. 关于html属性中onSubmit事件属性的使用

    看到一段onSubmit事件属性的例子,如下: <!DOCTYPE html> <html> <head> <script> function vali ...

  6. CSS属性中的display属性浅谈；

    首先我们要知道什么是块级元素和行内元素有什么区别: 承接上篇文章:(浅谈HTML和body标签) 块级元素:浏览器解析为独占一行的元素(例如:div.table.ul等.),浏览器会在该元素的前后显示 ...

  7. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  8. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  9. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

随机推荐

  1. OpenCV-Python 图像分割与Watershed算法 | 三十四

    目标 在本章中, 我们将学习使用分水岭算法实现基于标记的图像分割 我们将看到:cv.watershed() 理论 任何灰度图像都可以看作是一个地形表面,其中高强度表示山峰,低强度表示山谷.你开始用不同 ...

  2. link与@import区别整理，一个表格带你了解

    网上有许多link和@import的文章,不过大多比较零散,个人觉得一个表格的话看起来能够直观的表达. 于是制作了如下表格: 关于权重这个存在着一些争议,这次碰巧看到了一篇的博客很好的解释了这个问题, ...

  3. 利用sqlmap进行Access和Mysql注入

    sqlmap将检测结果保存到C:\Users\Administrator.sqlmap\output (windows) linux:(/root/.sqlmap/output) Access注入 1 ...

  4. html+css实现图片或元素的垂直、水平同时居中的多种方法

    实现元素或图片的上下.左右居中的三种方法 效果图如下: 方法一:利用vertical-align属性实现图片上下居中 先设置父元素样式text-align: center,实现图片左右居中,给图片添加 ...

  5. [斯坦福大学2014机器学习教程笔记]第五章-控制语句：for,while,if语句

    在本节中,我们将学习如何为Octave程序写控制语句. 首先,我们先学习如何使用for循环.我们将v设为一个10行1列的零向量. 接着,我们写一个for循环,让i等于1到10.写出来就是for i = ...

  6. 从上帝视角看Java如何运行

    JVM内存结构 可以看出JVM从宏观上可以分为 ‘内部’  及 ‘外部’  两个部分(便于记忆理解): ‘内部’包含:线程共享(公有)数据区 和 线程隔离(私有)数据区 ‘外部’包含:类加载子系统.垃 ...

  7. linux下zip/unzip详解

    linux下zip_unzip详解 命令列表:zip    -q (quiet)    -r (recursive)    -0(level0-level9)    -e (encrypt)    - ...

  8. Centos6升级内核方法

    docker需要内核在3.0以上,如果centos6上需要安装docker的话需要先将内核进行升级 工具/原料   Centos6.5_x64 方法/步骤     操作系统为centos6.5,内核为 ...

  9. 微信小程序wx:for隐藏遍历的最后一个元素

    微信小程序开发时有时会需要从wx:for遍历的元素中选取最后一个来进行相关操作,以下方法以隐藏最后一个元素为例 index==list.length-1 通过获取列表的总长度减一来得到最后一个元素是最 ...

  10. node+express+mysql实现简单的数据增删改查

    前提 电脑已经安装了node,express,mysql. 实现步骤 1.新建数据库表 附数据表结构: 2.创建exprss项目 express -e myapp  新建一个以ejs为模板的expre ...