transition 属性是一个简写属性，用于设置四个过渡属性：

1.transition-property   设置过渡效果的 CSS 属性的名称。一般写all

2.transition-duration   完成过渡效果需要多少秒或毫秒。单位有s和ms（1s=1000ms）

3.transition-timing-function   速度效果的速度曲线,默认是ease，还有linear、ease-in等

4.transition-delay   过渡效果何时开始，即鼠标放过去延迟几秒开始，默认0

三个注意点：
1.简写transition：width 3s ease 0s，不过一般我们都写成transition：all 3s；即可
2.有多个属性多种效果的时候，中间用逗号隔开transition：.....,.....;
3.记住：谁过渡，写在谁身上，不要写在hover里，写在hover里鼠标离开会没有过渡效果

示例：把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

<body>

    <div></div>

</body>
div {

            width: 100px;

            height: 100px;

            background: rgb(100, 19, 231);

            transition-property: width;

            transition-duration: 3s;

            transition-timing-function: ease;

            transition-delay: 0s;
            /* 简写 transition：all 3s；*/

        }

        div:hover {

            width: 300px;

        }

CSS3 过渡 （transition ）的更多相关文章

  1. CSS3 过渡transition 认识

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

  2. CSS3 过渡---transition

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

  3. css3过渡transition

    过渡:transition transition:transition-property/duration/timing-function/delay的缩写. transition : <'tr ...

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

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

  5. 【Demo】CSS3 过渡

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

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

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

  7. CSS3之过渡Transition

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

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

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

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

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

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

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

随机推荐

  1. exit status 1

  2. tkinter学习笔记_03

    6.单选框   Radiobutton import tkinter as tk root = tk.Tk() root.title("xxx") root.geometry('2 ...

  3. [LOJ2065] [SDOI2016]模式字符串

    题目链接 洛谷:https://www.luogu.org/problemnew/show/P4075 LOJ:https://loj.ac/problem/2065 Solution 这种题看起来就 ...

  4. CentOS7 修改Jenkins以root用户运行

    修改Jenkins以root用户运行,这在正式环境中是不可取的,但在自己的测试环境中就无所谓了啦,怎么方便怎么来. 1. 修改Jenkins配置文件1.1 修改$JENKINS_USER打开jenki ...

  5. MVC-10HTML助手

    HTML帮助器用于修改HTML输出. HTML帮助器 通过MVC,HTML帮助器类似于传统的ASP.NET Web Form控件. 类似ASP.NET中的web form控件,HTML帮助器用于修改H ...

  6. Keepalived简单理解

    Keepalived Keepalived是一个基于VRRP协议来实现的LVS服务高可用方案,可以利用其来避免单点故障.一个LVS服务会有2台服务器运行Keepalived,一台为主服务器(MASTE ...

  7. iOS - WebRTC 自编译（音视频即时通讯开源库）

    什么是WebRTC? WebRTC,名称源自网页实时通信(Web Real-Time Communication)的缩写,简而言之它是一个支持网页浏览器进行实时语音对话或视频对话的技术.是谷歌2010 ...

  8. JavaScript 数组去重的那几种方法

    数组去重是最常见的面试题,现在总结一下我所知道的几种 首先第一个就是es5 最常见的循环比较 var array= [1, 1, 2]; function test(nums) { for (var ...

  9. JAVA基础之ServletContext对象

    个人理解:  ServletContext类似字节码文件对象,在web创建的时候就自动生成了,并且是唯一的,跟随着项目和服务器共存亡了.通过这个对象,我们可以向里面存数据(键值对),也可以通过别的Se ...

  10. Python学习日记(十四) 正则表达式和re模块

    正则表达式: 它是字符串的一种匹配模式,用来处理字符串,可以极大地减轻处理一些复杂字符串的代码量 字符组:它是在同一位置可能出现的各种字符组成了一个字符组,用[]表示,但是它的结果只能是一个数字或者一 ...