CSS3 & HTML5 ;过渡不起作用

Question

我在 HTML、CSS 和 transition-属性上做了一些事情，transition-duration，transition-timing-function 属性在我的项目中不起作用。我用了每一个 -webkit- 、 -moz- 、 -o- 和其他的都不起作用。我确实卸载了 Google Chrome 并重新安装了它，但没有用。我的代码：

index.php:

<?php

include "function/baglanti.php";

?>

<html>

<head>

    <title>Deneme | Anasayfa</title>

    <link rel="stylesheet" href="style/main.css" />

</head>

<body>

    <div id="den">sshshsh</div>

</body>

</html>

main.css:

#den
{
    width: 100px;
    height: 100px;
    background-color: red;
}

#den:hover
{
    width: 200px;
    transition: width 0.5s linear;
}

Answer 1

为了实现双向转换，请将 transition 属性移至 #den 规则

#den
{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 0.5s linear;     /*  moved it here and it work both ways  */
}

#den:hover
{
    width: 200px;
}

<div id="den">sshshsh</div>

CSS3 & HTML5 ;过渡不起作用

CSS3 & HTML5 ; transition Doesnt work

html

css

transition

duration

properties