CSS、【なぜか】transitionプロパティが効かない時の対処法

こんにちは、はせです。
今回は、なぜか「transition」プロパティが効かない時の対処法を書いていきます。
ブラウザに関係なく
スペルミス等もしていないのになぜか
うまく出来ない場合は、
指定の仕方を

.sample

から

div.sample

こうすることで直りました。
何かしらルールがあるか分かりませんが、
後者の方が正しいっぽいですね・・・。

サンプル

<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UTF-8”>
 
    <title>Document</title>
    <style>
div.sample{
        width:100px;
        height:100px;
        border-style: solid;
        border-color:black;
        transition:background-color 1s linear 0.5s,width 1s linear 0.5s,height 1s linear 0.5s;
    }
div.sample:hover{
    width:200px;
    height:200px;
    background-color:rgba(0,0,0,0.3);
}
    </style>
</head>
<body>
    <div id=‘main’>
        <div class=‘sample’>さんぷる</div>
        <div class=‘sample’>さんぷる2</div>
        <div class=‘sample’>さんぷる3</div>
    </div>
</body>
</html>