时间戳

首页 > 解决方案 > CSS 过渡只能以一种方式工作，元素只会在没有过渡的情况下恢复

css - CSS 过渡只能以一种方式工作，元素只会在没有过渡的情况下恢复

问题描述

我试图让我的主要元素从一个带有变换的状态开始，当你将鼠标悬停在它上面时，它会随着一个过渡而变换。但是，当您将其悬停时，该元素会在不进行转换的情况下转换回其原始状态。如果我也将过渡放在主要位置，那么当页面加载时它会转换。我希望它在一开始就不会改变。任何帮助都可以。

main {
    width:500px;
    height:300px;
    transform:perspective(1500px) rotateX(50deg);
    transition:transform 2s;
}

main:hover {
    transition:transform 2s;
    transform:perspective(0px) rotateX(0deg);
}

标签： cssanimation

解决方案

将其包含在主要正常状态将解决此问题：

main {
    width:500px;
    height:300px;
    -webkit-transform:perspective(1500px) rotateX(50deg);
            transform:perspective(1500px) rotateX(50deg);
    -webkit-transition:-webkit-transform 2s;
    transition:-webkit-transform 2s;
    -o-transition:transform 2s;
    transition:transform 2s;
    transition:transform 2s, -webkit-transform 2s;
    background: red;
}

main:hover {
    -webkit-transform:perspective(0px) rotateX(0deg);
            transform:perspective(0px) rotateX(0deg);
}

查看小提琴。

初始悬停时没有过渡，将其设置为无正常状态：

main {
    width:500px;
    height:300px;
    -webkit-transform:perspective(1500px) rotateX(50deg);
            transform:perspective(1500px) rotateX(50deg);
    background: red;

    -webkit-transition:-webkit-transform 2s;

    transition:-webkit-transform 2s;

    -o-transition:transform 2s;

    transition:transform 2s;

    transition:transform 2s, -webkit-transform 2s;
}

main:hover {
    -webkit-transform:perspective(0px) rotateX(0deg);
            transform:perspective(0px) rotateX(0deg);
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
}

查看小提琴。

推荐阅读