CSS3 transition动画

最新推荐文章于 2024-10-30 08:30:00 发布

weixin_33872566

最新推荐文章于 2024-10-30 08:30:00 发布

阅读量105

点赞数

CC 4.0 BY-SA版权

原文链接：http://blog.51cto.com/13742773/2337008

本文深入讲解CSS中的transition动画，包括属性、持续时间、运动方式及延迟的设置。通过实例演示了如何平滑改变元素的宽度、高度和背景颜色，以及在鼠标悬停时显示图片说明文字的动画效果。

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">

            <h3>夜空中最亮的星</h3>
            <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动画

转载于:https://blog.51cto.com/13742773/2337008