过渡动画transition属性简介

transition是网页上的变化的逐渐过渡效果

例：transition: property duration timing-function delay;

border-radius:圆角
transition:产生动画
transition:all ... ease所有一起变
liner:匀速
ease-in:开始是慢速
ease-out:结束时慢速
scale:缩放
perspective:透视距离
transform:交换 skew:斜切

 <!DOCTYPE html>
 <html lang="en">
 <head>
<meta charset="UTF-8">
<title>loading</title>
<style type="text/css">
    .box{
        width:300px;
        height:125px;
        border:1px solid #000;
        margin:200px auto 0;
    }
    .box p{
        text-align: center;
        padding-top: 89px;
        float: top;
    }
    .box1{
        width:30px;
        height:70px;
        margin:15px;
        background-color:rgb(255,0,0);
        border-radius:10px;
        animation: loading 0.5s ease 100ms infinite alternate;
        float: left;
    }
    .box2{
        width:30px;
        height:70px;
        margin:15px;
        background-color: rgb(0,219,0);
        border-radius:10px;
        animation: loading 0.5s ease 200ms infinite alternate;
        float: left;
    }
    .box3{
        width:30px;
        height:70px;
        margin:15px;
        background-color: rgb(255,193,203);
        border-radius:10px;
        animation: loading 0.5s ease 300ms infinite alternate;
        float: left;
    }
    .box4{
        width:30px;
        height:70px;
        margin:15px;
        background-color: rgb(173,255,46);
        border-radius:10px;
        animation: loading 0.5s ease 400ms infinite alternate;
        float: left;
    }
    .box5{
        width:30px;
        height:70px;
        margin:15px;
        background-color: rgb(0,255,255);
        border-radius:10px;
        animation: loading 0.5s ease 500ms infinite alternate;
        float: left;
    }
    @keyframes loading{
        from{
            transform: scaleY(1);
        }
        to{
            transform: scaleY(0.5);
        }
    }
</style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <p>loading....</p>
</div>
</body>
</html>