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. 使用Python创建自己的Instagram滤镜

    不知道你有没有使用过Instagram滤镜,它们非常方便,只需单击几个按钮,就可以变换我要发布的照片​​. 你是否想过自己可以创建一个?答案是可以的! 在本文中,我将向你展示如何使用代码和示例图像来创 ...

  2. 一 JVM垃圾回收模型

    一 JVM垃圾回收模型 一. GC算法 1.1 标记-清除算法(Mark-Sweep) 算法分为"标记"和"清除"两个阶段首先标记出所有需要回收的对象,然后回收 ...

  3. AQS源码解析

    文大篇幅引用自HongJie大佬的一行一行源码分析清楚AbstractQueuedSynchronizer,这只是一篇简单的个人整理思路和总结(倒垃圾),如果觉得有些难懂的话,不要犹豫也不要疑惑,很明 ...

  4. vi文本编辑器的学习

    vi文本编辑器的启动与退出 启动:快捷键Ctrl+Alt+t进入终端, 在系统提示符($或#)的提示下,输入vi <文件名称>,可以自动载入你要编辑的文件或者新建一个文件. 退出:在指令模 ...

  5. JVM基础结构与字节码执行引擎

    JVM基础结构 JVM内部结构如下:栈.堆. 栈 JVM中的栈主要是指线程里面的栈,里面有方法栈.native方法栈.PC寄存器等等:每个方法栈是由栈帧组成的:每个栈帧是由局部变量表.操作数栈等组成. ...

  6. linux下使用笔记本的相关设置

    目录 无线连接 Wi-Fi 蓝牙 触摸板 电源管理 电源管理工具 电源相关行为的响应动作 按键和盖子的响应动作 电池低电量的响应动作 处理器调整 调频工具 关闭睿频 intel_pstate 休眠配置 ...

  7. div实现富文本编辑框

    ocument.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数]) 其中:sCommand为指令参 ...

  8. P3381 【模板】最小费用最大流 题解

    CSDN同步 原题链接 前置知识: 从三种算法剖析网络流本质 简要题意: 给定网络图,求图的最大流,以及流量为最大流时的最小费用. 现在假设你们看了那篇网络流博客之后,所有人都会了 \(\text{E ...

  9. ceph概述

                                                                            ceph概述   基础知识 什么是分布式文件系统 •   ...

  10. Linux基础：Day01

    Linux操作系统的知识体系: 1.初级  2.中级  3.高级  4.*额外知识*  1.初级  1.1.OS操作系统的原理  1.2.开始了解常用的命令(系统管理的基础命令)   开机关机   时 ...