CSS3 transition动画

发布时间：2020-07-20 22:20:19 作者：bigbeatwu
来源：网络阅读：883

1.transition动画

（1）transition-property 设置过渡的属性，比如：width height background-color

（2）transition-duration 设置过渡的时间，比如：1s 500ms

（3）transition-timing-function 设置过渡的运动方式，常用有linear（匀速）| ease（缓冲运动）

（4）transition-delay 设置动画的延迟

（5）transition：property duration timing-function delay; 同时设置

<head>
<meta charset="utf-8">
<title>transition动画</title>
<style type="text/css">

.box{
    width: 100px;
    height: 100px;
    background-color: yellow;
    transition: all 500ms ease,background-color 2s ease;
}
.box:hover{
    width: 500px;
    height: 500px;
    background-color: red;
}
</style>

</head>

<body>

<div class="box"></div>

</body>

CSS3 transition动画

例子二：图片说明文字

<head>
<meta charset="utf-8">
<title>图片</title>
<style type="text/css">

.box{
    width: 320px;
    height: 405px;
    margin: 50px auto 0;
    position: relative;
    overflow: hidden;
}
.text{
    width: 320px;
    height: 100px;
    position: absolute;
    top: 405px;
    background-color: rgba(124,119,119,0.30);
    transition: all 500ms ease;
}
.box:hover .text{
    position: absolute;
    top: 305px;
}
</style>

</head>

<body>
<div class="box">
<img src="images/3_02.png" alt="星空">
<div class="text">

            <h4>夜空中最亮的星</h4>
            <p>我在思考人生</p>
        </div>

</div>

</body>

CSS3 transition动画

例子三：夏目

<head>
<meta charset="utf-8">
<title>joke</title>
<style type="text/css">

@keyframes joke{
    from{
        left: 0px;
    }
    to{
        left: -2136px;      /*图片宽度*/
    }
}
.box{
    width: 534px;
    height: 300px;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}
.box img{
    position: absolute;
    animation: joke 1s steps(4) infinite;
}
</style>

</head>

<body>

<div class="box">
    <img src="images/xia.png" alt="夏目友人帐">
</div>

</body>

CSS3 transition动画

CSS3 transition动画

相关阅读