css - 不可能给一个图像不止一个过渡吗？

Question

所以我制作了一个带有复选框的 php 表单，我将其显示为图像。现在我给了他们一个过渡，如果你点击它们，女巫的不透明度会从 0.5 变为 1 现在我想将边框颜色从红色更改为黄色，但如果我将这 2 个过渡组合在一起，似乎只有一个有效。不透明度在那里，但它立即从 0.5 变为 1，而不是在 2 秒的时间跨度内

这是我的带有 2 个转换的 CSS:

img {

    width: 100%;
    max-width: 390px;
    height: 100%;
    max-height: 250px;
    margin: -3px;
    border-radius:15px;
    transition:opacity 2s ease;
    opacity: 0.5;

    transition: border 1s ease;
    border: red 3px solid;

    }

现在有一些重要的代码我无法显示，因为漂亮的 stackoverflow 编辑器不接受它作为 css

还是希望有人能帮帮我

Answer 1

您可以在同一个 transition: 规则中用逗号分隔多个转换。

img {
    width: 100%;
    max-width: 390px;
    height: 100%;
    max-height: 250px;
    margin: -3px;
    border-radius:15px;
    transition:opacity 2s ease, border 1s ease;
    opacity: 0.5;
    border: red 3px solid;
}

如果你有多个转换，都具有相同的持续时间和计时函数，你可以使用简写all:

transition: all 2s ease;

Working Example