CSS动画：缩小顶部图像以显示子图像答案

【问题标题】：CSS animation: shrink top image to reveal sub imageCSS动画：缩小顶部图像以显示子图像
【发布时间】：2021-05-20 21:59:11
【问题描述】：

实际上，我将两张图像堆叠在一起。超时后，我希望顶部图像开始缩小，而不是完全消失，它只会变成缩略图。随着顶部图像缩小为缩略图大小，底部图像就会显露出来。

我在 CSS 动画方面的经验为零，那么自学以上内容的最佳做法是什么？

<div class="block">
    <div class="block__content">
        <h3 class="title--s">
            this is the title
        </h3>
    </div>
    <div class="block__image product-sale">
        <img src="/topimage" alt="topimage">
    </div>
</div>

product-sale 类包含缩略图：

&.product-sale {
                &:before {
                content: "text";
                height: 53px;
                padding: 10px;
                background: red;
                color: #fff;
                font-weight: bolder;
                position: absolute;
                z-index: 999;
                display: flex;
                align-items: center;
                justify-content: center;
                left: 30px;
                font-size: 11px;
                }
            }

类.block__image的代码：

.block__image {
            min-width: 140px;
            position: relative;

            img {
                width: 400px;
                height: 200px;
                -o-object-fit: cover;
                object-fit: cover;
                padding: 0px 30px 30px 30px;

            }
}

我的第一个尝试是向伪元素添加过渡？ https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2

【问题讨论】：

你能添加一些代码吗？
@ATP 我添加了一些代码

标签： css animation css-animations

【解决方案1】：

您可以在 css 中使用 @keyframes 和动画来为图像设置动画。我不明白你所说的缩略图，但这里是你可以用来制作动画的代码。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .sub img {
                width: 300px;
                position: absolute;
                animation-name: shrink;
                animation-duration: 4s;
                animation-delay: 5s;
            }
            .top img {
                width: 300px;
                position: absolute;
            }
            @keyframes shrink {
                from {width: 300px;}
                to {width: 50px;}
            }
        </style>
    </head>
    <body>
        <div class="block">
            <div class="block__content">
                <h3 class="title--s">
                this is the title
                </h3>
            </div>
            <div class="top">
                <img src="/mm.jpg" alt="topimage">
            </div>
            <div class="sub">
                <img src="/m.png" alt="subimage">
            </div>
        </div>
    </body>
</html>

【讨论】：