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. flume面试题

    1 你是如何实现Flume数据传输的监控的使用第三方框架Ganglia实时监控Flume. 2 Flume的Source,Sink,Channel的作用?你们Source是什么类型?1.作用 (1)S ...

  2. GitLab → 搭建中常遇的问题与日常维护

    开心一刻 隔壁有一个80多岁的老大爷,昨天在小区的一棵树下发现一条黑色的蛇,冻僵了,大爷善心大发,就把蛇揣在了怀里,想给它一点温暖. 今天一大早看到大爷在树上挂了一个牌子,写到:不准随地大小便! 搭建 ...

  3. Python Seaborn综合指南，成为数据可视化专家

    概述 Seaborn是Python流行的数据可视化库 Seaborn结合了美学和技术,这是数据科学项目中的两个关键要素 了解其Seaborn作原理以及使用它生成的不同的图表 介绍 一个精心设计的可视化 ...

  4. PHP7内核（七）：常见变量类型的基本结构

    上篇文章讲述了变量的存储结构zval,今天我们就来学习一下几个常见变量类型的基本结构. 一.类型一览 zval中的u1.v.type用来存储变量的类型,而zval.value存储的是不同类型对应的值, ...

  5. swagger2 接口文档

    1,maven: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...

  6. Python python 五种数据类型--列表

    # 列表的定义 var1 = [] var2 = list() print(type(var1)) #<class 'list'> print(type(var2)) #<class ...

  7. 软件架构的演进：单体、垂直、SOA、微服务

    软件架构演进 软件架构的发展经历了从单体结构.垂直架构.SOA架构到微服务架构的过程,以下为具体分类: 1.1.1      单体架构 特点: 1.所有的功能集成在一个项目工程中. 2.所有的功能打一 ...

  8. Java 数组 字符 函数

    一. 1. package Hello; import java.util.Scanner; public class hello_test { public static void main(Str ...

  9. js拖拽效果的实现及原理

    元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. 拖拽原理:按下拖拽元素后开始监听文档中鼠标移动事件,然后再监听鼠标松开事件:鼠标移动时,元素div要随着鼠标一起移动,需要计算元素div位移的距离 ...

  10. Spring钩子接口Aware

    前言 我们在编写代码的时候,有的时候想要使用Spring的底层组件,类似于 ApplicationContext, BeanFactory等等 那我们实现Spring提供的钩子方法xxxAware.在 ...