Question

为什么这不起作用？我想在开始时，我的元素类将是不可见的，并逐渐变得可见。

HTML：

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
    </head>
    <body>
        <div class="element"></div>
    </body>
</html>

和我的CSS：

    .element {
    width: 200px;
    height: 200px;
    background: purple;
    transition-duration: 3s;
    -webkit-transition-duration: 3s;
    animation-name: coucou;
}


@keyframes coucou {
    from {
        opacity: 0;       
    }
    to {
        opacity: 1;
    }
}

Answer 1

为chrome，safari和opera浏览器添加特殊规则：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <meta charset="utf-8">
        <style type="text/css">
            .element {
    width: 200px;
    height: 200px;
    background: purple;
    -webkit-animation: coucou 5s infinite; /* Chrome, Safari, Opera */ 
    animation: coucou 5s infinite;
}


@keyframes coucou {
    from {
        opacity: 0;       
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes coucou {
    from {
        opacity: 0;       
    }
    to {
        opacity: 1;
    }
}
        </style>
    </head>
    <body>
        <div class="element"></div>
    </body>
</html>

Answer 2

.element
    {
        width: 200px;
        height: 200px;
        background: purple;
        transition: all 0.5s ease-in-out 0s;
        opacity: 0;
    }
    .element:hover
    {
        width: 400px;
        transition: all 0.5s ease-in-out 0s;
        opacity: 1;
    }

为什么这个动画/过渡不起作用？

2 个答案: