一.理解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. sublime中Vue高亮插件安装

    1.准备语法高亮插件vue-syntax-highlight. 下载地址: https://github.com/vuejs/vue-syntax-highlight 下载页面并下载: 解开压缩包vu ...

  2. Redis安装、主从配置及两种高可用集群搭建

    Redis安装.主从配置及两种高可用集群搭建 一.            准备 Kali Linux虚拟机 三台:192.168.154.129.192.168.154.130.192.168.154 ...

  3. v8--sort 方法 源码 （2） 快速排序法

    v8 sort方法部分关于快速排序法的源码: function QuickSort(a, from, to) { // Insertion sort is faster for short array ...

  4. vue 属性props定义方法

    当子组件接收父组件传过来的值的时候,我们一般有两种方式来接收 不过大家好像都用第二种方式,我只有在不确定数据类型的时候才用第一种方式 第一种: export default { // 不检测类型,全盘 ...

  5. MongoDB 设置参数

    服务器配置文件分析 bin目录下的mongod.cfg是服务器的配置文件,文件中主要的配置参数: 1.数据库文件的存放位置 2.服务器日志文件的存放位置 3.默认的IP地址.端口号 设置密码 默认情况 ...

  6. Navicat链接数据库报错1130解决方案

    1.背景 使用localhost 可以正常连接mysql服务器,但是使用ip地址连接保存如下: 2.问题原因 默认情况下root用户只允许本机访问,即使用localhost访问,如下图: 解决方案:将 ...

  7. 高阶函数-map/filter/reduce

    什么样的函数叫高阶函数: 条件:1.函数接受函数作为参数 2.函数的返回值中包含函数 高阶函数之----map函数 map(func, *iterables) --> map objectnum ...

  8. Java开发环境之JDK

    查看更多Java开发环境配置,请点击<Java开发环境配置大全> 零章:JDK安装教程 1)下载JDK安装包 http://www.oracle.com/technetwork/java/ ...

  9. 肖哥HCNP-正式篇笔记

    21.网工学习环境准备. 一. 关掉所有杀毒软件及管家如阿健. 二. 安装环回网卡 (一定要先安装.) 1. 计算机设备管理 2. 在右侧最上端计算机名上方右键,点击过时硬件. 3. 下一步.手动选择 ...

  10. 拿webshell方法汇总

    地址:https://blog.csdn.net/Breeze_CAT/article/details/80044676