CSS3或Javascript - 簡單填充動畫

我正在嘗試創建一個簡單的動畫，當用戶將鼠標懸停在某個元素上時，其中包含的另一個元素將填充其父元素。目前，我有一個JSFiddle可以做到這一點。CSS3或Javascript - 簡單填充動畫

但是，我想用一些其他功能來完成這一點，我不確定自己實際上可以在CSS3中做什麼。

我試圖找到一種方法，在其內圓完全填滿其母公司（即當其寬度/高度= 300像素），我想填充暫停，而不是後消失動畫完成。
當用戶將鼠標移動到：hover範圍之外時，我希望動畫反轉方向而不是突然停止。

我和CSS3遠遠得到這一點，但我不知道我可以實現這些功能，2而不訴諸的JavaScript。有誰知道完全用CSS3做這件事的方法嗎？有人知道是否有可能在CSS3中完成這兩項功能，因爲我似乎找不到任何東西。

.circle { 
     width: 300px; 
     height: 300px; 
     background-color: white; 
     border: 1px solid #000000; 
     overflow: hidden; 

     border-radius: 150px; 
     -moz-border-radius: 150px; 
     -webkit-border-radius: 150px; 
} 

.filler { 
     width: 0px; 
     height: 0px; 
     background-color: red; 
     border: none; 
     position: relative; 
     left: 50%; 
     top: 50%; 

     border-radius: 150px; 
     -mox-border-radius: 150px; 
     -webkit-border-radius: 150px; 

     animation: empty 1s; 
} 

.circle:hover .filler { 
     animation: fill 2s; 
     -moz-animation: fill 2s; 
     -webkit-animation: fill 2s; 
     background-color: blue; 
} 

@keyframes fill 
     { 
     from {background: red; height: 0px; width: 0px;} 
     to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;} 
     } 

     @-moz-keyframes fill /* Firefox */ 
     { 
     from {background: red; height: 0px; width: 0px;} 
     to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;} 
     } 

     @-webkit-keyframes fill /* Safari and Chrome */ 
     { 
     from {background: red; height:0px; width:0px;} 
     to {background: green; height: 300px; width: 300px; top: 0%; left: 0%;} 
     } 

     @keyframes empty 
     { 
     to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;} 
     } 
     @-moz-keyframes empty 
     { 
     to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;} 
     } 
     @-webkit-keyframes empty 
     { 
     to {background: red; height: 0px; width: 0px; top: 50%; left: 50%;} 
     }

JS Fiddle

來源

2013-04-05 Shawn Taylor

你不需要的關鍵幀爲這個簡單的動畫。下面是CSS，你需要：

.circle { 
    position: relative; 
    width: 300px; 
    height: 300px; 
    background-color: white; 
    border: 1px solid #000000; 
    border-radius: 150px; 
    overflow: hidden; 
} 

.filter { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 0; 
    height: 0; 
    background-color: red; 
    border-radius: 0px; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 

.circle:hover .filter { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border-radius: 150px; 
    background-color: blue; 
}

和HTML：

<div class="circle"> 
    <div class="filter"></div> 
</div>

下面是一個例子：http://jsbin.com/agekef/1/edit

來源

2013-04-05 06:46:49 Vadim

哇。那很完美。是否有一種方法可以在動畫完成後鎖定實心圓？我只希望它不填充，如果它不完全填滿。 – 2013-04-05 07:02:12

@ShawnTaylor鎖定有點棘手，你需要一些JavaScript來做到這一點。這樣的JavaScript的例子，你可以在這裏找到：http://jsbin.com/agekef/3/edit – Vadim 2013-04-05 07:34:20

再次，一個完美的解決方案。這就是我期待的確切行爲。感謝Vadim！ – 2013-04-05 07:36:45

我希望你可以嘗試這個鏈接可以幫助你走出

<http://jsfiddle.net/spacebeers/sELKu/3/> 
<http://jsfiddle.net/SZqkb/1/> 
<http://css-tricks.com/examples/DifferentTransitionsOnOff/>

感謝

來源

2013-04-05 05:47:04 Darshan

CSS3或Javascript - 簡單填充動畫

回答

相關問題