是否不可能为图像提供多个转换?

时间:2015-07-09 07:39:08

标签: css transition

所以我制作了一个带有chekboxes的php表单,我将其显示为图像。现在我给了他们一个过渡的东西,如果你点击它们,女巫从不透明度0.5变为1 现在我本来希望将边框颜色从红色更改为黄色,但如果我将这两个过渡组合起来只有一个似乎有效。不透明度存在,但它立即从0.5变为1而不是在2秒的时间内

这是我的css,包含2个转换:

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

我仍然希望有人可以帮助我

1 个答案:

答案 0 :(得分: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