CSS3过渡效果transition----附手风琴案例CSS3中新增的transform属性，实现了元素在变化过程中的

本文已参与「新人创作礼」活动，一起开启掘金创作之路

CSS3中新增的transform属性，实现了元素在变化过程中的过渡效果，实现了基本的
动画。

定义和用法

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

transition-property
规定设置过渡效果的 CSS 属性的名称。
transition-duration
规定完成过渡效果需要多少秒或毫秒。
transition-timing-function
规定速度效果的速度曲线。
①linear：线性过渡。
②ease：平滑过渡，这是默认值
③ease-in：由慢到快。
④ease-out：由快到慢。
⑤ease-in-out：由慢到快再到慢。
transition-delay

定义过渡效果何时开始。

浏览器兼容性问题

基于webkit内核的私有属性是：-webkit-transition;

基于gecko内核的私有属性是：-moz-transition;

基于prestot内核的私有属性是：-o-transition;

实例：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

手风琴案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            text-align: center;
            margin: 0px;
            padding: 0px;
        }
        li{
            list-style:none;;
            height: 30px;
        }

        .mennu{
            height: auto;
            width: 250px;
            margin: 50px auto;
        }
        .item{
            width: 100%;
            height: auto;

        }
        .item:hover > .itemBox{
            height: 120px;
        }
        .item > h3{
            background-color: skyblue;
            color: orange;
            height: 40px;
            line-height: 40px;
            border-bottom: 2px solid #ccc;
        }
        .item >.itemBox{
            width: 100%;
            height: 0;
            overflow: hidden;
            /*添加过渡效果*/
            transition-property: height;
            transition-duration: 1s;
        }
        .item >.itemBox >ul{
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
<div class="mennu">
    <div class="item">
        <h3>国际新闻</h3>
        <div class="itemBox">
            <ul>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>国内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>省内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>市内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
                <li>深圳市遇到有史以来最大台风</li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

效果图

在这里插入图片描述