Css懸停縮放效果不會工作

Question

我有一個關於CSS懸停縮放效果的問題。

我創造了這個DEMO從codepen.io

在這個演示中，你可以看到有紅色的div。當你點擊div .CRtW11將會打開。所以我想爲.ReaC div添加懸停縮放效果。我嘗試了以下轉換效果，但它不起作用。

-moz-transform: scale(1.1, 1.1); 
    -ms-transform: scale(1.1, 1.1); 
    -webkit-transform: scale(1.1, 1.1); 
    transform: scale(1.1, 1.1); 

我不明白我在做什麼錯在這方面任何人都可以幫助我？

HTML

CSS

.cR { 
    width:20px; 
    height:20px; 
    position:relative; 
    background-color:red; 
    cursor:pointer; 
} 
.CRtW11 { 
    position:absolute; 
    width:215px; 
    height:40px; 
    background-color:blue; 
    opacity:0; 
    transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -webkit-transition: all 0.2s ease; 
    -webkit-transform-origin: left bottom 0px; 
    -webkit-transform: scale(0); 
    box-shadow: 0 3px 10px 0 rgba(0,0,0,0.24); 
    z-index:1; 
    margin-top:-45px; 
    border-radius:30px; 
    -webkit-border-radius:30px; 
    -moz-border-radius:30px; 
    padding:5px; 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 
.CRtW11-active { 
    box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    opacity: 1; 
    transition: all 0.2s ease; 
    -moz-transition: all 0.2s ease; 
    -webkit-transition: all 0.2s ease; 
    -webkit-transform: scale(1); 
} 

.ReaC { 
    float:left; 
    position:relative; 
    width:30px; 
    height:30px; 
    border-radius:50%; 
    -webkit-border-radius:50%; 
    -moz-border-radius:50%; 
    background-color:red; 
    margin-right:5px; 
    display:none; 
    opacity:0; 
    -moz-transition: ease 0.2s; 
    -o-transition: ease 0.2s; 
    -webkit-transition: ease 0.2s; 
    transition: ease 0.2s; 
} 
.ReaC:hover 
{ 
    background:yellow; 
    -moz-transform: scale(1.1, 1.1); 
    -ms-transform: scale(1.1, 1.1); 
    -webkit-transform: scale(1.1, 1.1); 
    transform: scale(1.1, 1.1); 
} 

Answer 1

嘗試雷莫詠從.ReaC-active

-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
animation-fill-mode: both;