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. SpringBoot 整合 MyCat 实现读写分离

    MyCat一个彻底开源的,面向企业应用开发的大数据库集群.基于阿里开源的Cobar产品而研发.能满足数据库数据大量存储:提高了查询性能.文章介绍如何实现MyCat连接MySQL实现主从分离,并集成Sp ...

  2. junit Mockito使用入门

    junit Mockito使用入门 准备 在我们进一步讨论之前,让我们探索几种不同的方法来启用Mockito测试中注释的使用. 方式一 MockitoJUnitRunner 我们拥有的第一个选择是使用 ...

  3. 递归回溯法求N皇后问题

    问题描述:在一个NN(比如44)的方格中,在每一列中放置一个皇后,要求放置的皇后不在同一行,同一列,同一斜线上,求一共有多少种放置方法,输出放置的数组. 思路解析:从(1,1)开始,一列一列的放置皇后 ...

  4. OpenCV-Python 如何使用背景分离方法 | 四十六

    目标 背景分离(BS)是一种通过使用静态相机来生成前景掩码(即包含属于场景中的移动对象像素的二进制图像)的常用技术. 顾名思义,BS计算前景掩码,在当前帧与背景模型之间执行减法运算,其中包含场景的静态 ...

  5. OpenCV-Python系列教程介绍

    写在前面的话 OpenCV是计算机视觉中经典的专用库,其支持多语言.跨平台,功能强大. OpenCV-Python为OpenCV提供了Python接口,使得使用者在Python中能够调用C/C ,在保 ...

  6. centos7单机安装kafka

    基础要求操作系统:CentOS 7x 64位 kafka版本:kafka_2.11-0.8.2.1 #安装使用的jdk以及kafka的包我放到百度云了,需要自取. # 链接:https://pan.b ...

  7. java面试基础篇-List

    一.ArrayList: 底层为数组实现,线程不安全,查询,修改快,增加删除慢, 数据结构:数组以0为下标依次连续进行存储 数组查询元素:根据下标查询就行 数组增加元素:如果需要给index为10的位 ...

  8. 读者来信 | 刚搭完HBase集群，Phoenix一启动，HBase就全崩了，是什么原因?（已解决）

    前言:之前有朋友加好友与我探讨一些问题,我觉得这些问题倒挺有价值的:于是就想在本公众号开设一个问答专栏,方便技术交流与分享,专栏名就定为:<读者来信>.如遇到本人能力有限难以解决的问题,我 ...

  9. 【cs224w】Lecture 3 - Motif, Graphlet 及 结构性角色

    目录 Network Motifs Configuration Model Graphlets How to Find Motifs and Graphlets Structural Roles 转自 ...

  10. Python常用模块之模块的使用

      一 模块介绍 1.什么是模块? #常见的场景:一个模块就是一个包含了一组功能的python文件,比如spam.py,模块名为spam,可以通过import spam使用. #在python中,模块 ...