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 - 简单填充动画

回答

相关问题