一.理解transition属性

W3C标准中对CSS3的transition是这样描述的：

CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击，获得焦点，被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。简洁点说就是当元素从一种样式变换为另一种样式时为元素添加效果。

transition主要有***四个属性***，那这四个属性怎么记呢？变换的话总得有变换的属性名吧，知道是要哪个属性变，还得有变换的持续时间吧，持续时间里还得有变换速率吧，是先快后慢呢还是先慢后快呢；最后呢，一般动画都会有个延迟选项吧；所以就是**属性**，**时间**，**速率**，**延迟**

transition-property：/*规定设置过渡效果的 CSS 属性的名称。*/

transition-duration：/*规定完成过渡效果需要多少秒或毫秒。*/

transition-timing-function：/*规定速度效果的速度曲线。*/

transition-delay：/*定义过渡效果何时开始。*/

下面用几个实例来展示transition的具体用法。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>画一个过渡效果</title>

    </head>

    <style>

        .container {

            width: 100px;/* 设置为过渡前的宽度*/

            height: 100px;

            background: red;

            transition: width 2s;/* 规定过渡元素为宽度，变化时长为2秒*/

            transition-timing-function:linear;/*不设置该属性时默认速度效果的速度曲线为慢->快->慢，这里我将其设为匀速变化*/

            transition-delay: 1s;/* 规定在过渡效果开始之前需要等待的时间为1秒*/

        }

        .container:hover {

            width: 300px;/* 设置为过渡后的宽度*/

        }

    </style>

    <body>

        <div class="container">

        </div>

        <p>把鼠标指针移动到红色的 div 上，观看过渡效果。</p>

    </body>

</html>

效果如下：

我想，通过代码都能大概了解transition的基础用法了吧。

那么直接来分享一下手风琴的案例吧，由于比较简单，都是通过注释代码来讲解，就不叙述了

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>transition的手风琴案例</title>

        <style>

            * {

                margin: 0;/*格式化*/

                padding: 0;

            }

            .mulu {

                width: 250px;

                height: auto;

                margin: 30px auto;/*设置手风琴整体居于页面居中*/

            }

            .item h3{/*标题*/

                width: 100%;

                height: auto;

                text-align: center;/*设置文本居中*/

                background: #ff0000;

                border-bottom: 1px solid gray;/*设置下边框3个属性（1px，实线，灰色）*/

            }

            .item .item-box{/*内容*/

                width: 100%;

                height: 0;/*鼠标没有悬停时，高度为0*/

                overflow: hidden;/*鼠标没有悬停时，隐藏内容，*/

                transition: height 2s;/*设置高度的过渡变化为2秒*/

            }

            .item .item-box ul{/*内容列表*/

                list-style: none;/*去掉无序列表样式，即是字体前的小圆点*/

                background: #008795;

                padding: 10px;/*设置内边距为10px*/

            }

            .item:hover .item-box{/*鼠标悬停时变化*/

                height: 100px;/*鼠标悬停时高度变化为100px*/

            }

            ul li:active{/*鼠标点击时变化*/

                color: white;/*鼠标点击时，字体变白*/

            }

        </style>

    </head>

<!--先用盒模型来规范一下，设置4个div，分别输入不同的新闻栏目，以地址来命名，在不同的栏目中再设置列表，写上详细的新闻列表-->

    <body>

        <div class="mulu">

            <div class="items">

                <div class="item"><!--新闻栏目1-->

                    <h3>遂溪县</h3><!--地址标题-->

                    <div class="item-box">

                        <ul>

                            <li>遂溪的菜市场有个小书生。</li><!--新闻列表1-->

                            <li>遂溪的菜市场有个小书生。</li><!--新闻列表2-->

                            <li>遂溪的菜市场有个小书生。</li><!--新闻列表3-->

                            <li>遂溪的菜市场有个小书生。</li><!--新闻列表4-->

                        </ul>

                    </div>

                </div>

                <div class="item">

                    <h3>湛江市</h3>

                    <div class="item-box">

                        <ul>

                            <li>湛江的菜市场有个小书生。</li>

                            <li>湛江的菜市场有个小书生。</li>

                            <li>湛江的菜市场有个小书生。</li>

                            <li>湛江的菜市场有个小书生。</li>

                        </ul>

                    </div>

                </div>

                <div class="item">

                    <h3>广东省</h3>

                    <div class="item-box">

                        <ul>

                            <li>广东的菜市场有个小书生。</li>

                            <li>广东的菜市场有个小书生。</li>

                            <li>广东的菜市场有个小书生。</li>

                            <li>广东的菜市场有个小书生。</li>

                        </ul>

                    </div>

                </div>

                <div class="item">

                    <h3>大中国</h3>

                    <div class="item-box">

                        <ul>

                            <li>中国的菜市场有个小书生。</li>

                            <li>中国的菜市场有个小书生。</li>

                            <li>中国的菜市场有个小书生。</li>

                            <li>中国的菜市场有个小书生。</li>

                        </ul>

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

效果如下：

鼠标悬停后

css3学习之--transition属性（过渡）的更多相关文章

  1. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  2. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  3. CSS3中的Transition属性详解

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

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

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

  5. CSS3学习之 transform 属性

    CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...

  6. CSS3学习笔记之属性值

    font-family 设置文本的字体名称. font-style 设置文本样式. 取值 normal不使用斜体. italic使用斜体. oblique使用倾斜体. inherit从父元素继承. f ...

  7. css3动画（transition）属性探讨

    在webapp引用开发中经常会用到css3动画效果,下面我们就一起探讨一下这个属性的使用. 在哪里定义动画效果? css3动画一般通过鼠标事件或者说状态定义动画,通常我们可以用CSS中伪类和js中的鼠 ...

  8. css3中transition属性详解

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

  9. css3——transition属性和opacity属性

    [transition-duration] 是一个css3属性,规定完成过度效果需要花费的时间(一秒或毫秒计).语法:transition-duration: time;time :    规定完成过 ...

随机推荐

  1. jquery实现倒计时

    <html> <head> <meta charset="utf-8"/> <title>jquery实现倒计时</title ...

  2. JMeter性能测试，入门

    原文转自:https://blog.csdn.net/lovesoo/article/details/78579547 Apache JMeter是一款纯java编写负载功能测试和性能测试开源工具软件 ...

  3. Windows10家庭版安装docker攻略

    在公司,一直使用mac系统,在mac上安装使用docker还是比较方便的,可本人心血来朝,家里是win10 home版,就想在windows上刷一刷. 好了,废话不多说,直接上干货. 为了不误导广大爱 ...

  4. Python_类的继承与方法重写

    1.新建子类时,括号内要传入继承的父类名 2.super()方法:自动寻找当前类的父类,并调用父类的构造函数,初始化属性值 class Cup: #构造函数,初始化属性值 def __init__(s ...

  5. 玩转DNS服务器——Bind服务

    合理的配置DNS的查询方式 实验环境: 虚拟机:VMware® Workstation 15 Pro 均使用NAT连接   网段为192.168.1.0/24 DNS 服务器 ---- Centos ...

  6. 摘：J2EE开发环境搭建(1)——安装JDK、Tomcat、Eclipse

    J2EE开发环境搭建(1)——安装JDK.Tomcat.Eclipse 1:背景 进公司用SSH(Struts,spring和hibernate)开发已经有两个月了,但由于一 直要么只负责表示层的开发 ...

  7. python笔记39-unittest框架如何将上个接口的返回结果给下个接口适用(面试必问)

    前言 面试必问:如何将上个接口的返回结果,作为下个接口的请求入参?使用unittest框架写用例时,如何将用例a的结果,给用例b使用. unittest框架的每个用例都是独立的,测试数据共享的话,需设 ...

  8. 如何查看自己steam库里游戏是哪个区的

    1 开启Steam开发者模式,切换到控制台,以便调出游戏区域数据 1.1 首先找到Steam的快捷方式,在目标一行中最后输入 -dev (前面带空格),然后重新运行. 1.2 如下图上方标签切换到控制 ...

  9. NodeJS 多版本管理（NVM）

    前言 现在前端各种框架更新较快,对 Node 的依赖也不一样,Node 的过版本管理也很有必要. NVM(Node Version Manager),是一个 Node 的版本管理工具. 官方的 NVM ...

  10. delete properties inside object