jQuery 用 CSS3 动画扩展圆圈
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9320658/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expanding circles with CSS3 animations
提问by thomasbritton
I am trying to make it so when the page loads circles appear which is fine, but I need them to grow outwards, so small to big from the center not from the top left:
我试图做到这一点，当页面加载圆圈出现时，这很好，但我需要它们向外生长，从中心小到大，而不是从左上角：
You can see what I have currently here: http://thomasbritton.co.uk/projects/ebrd/
你可以在这里看到我目前拥有的：http: //thomasbritton.co.uk/projects/ebrd/
Ideally, want this to be done in CSS but can use JS if it's easier/more stable.
理想情况下，希望这在 CSS 中完成，但如果更容易/更稳定，可以使用 JS。
Any ideas?
有任何想法吗？
Here is my css also for the animation part:
这是我的 css 也用于动画部分：
.circle a {
border-radius: 150px;
color: #fff;
height: 0;
position: absolute;
text-decoration: none;
width: 0;
}
.circle a.grow {
-webkit-animation-name: grow;
-webkit-animation-duration: 2.2s;
-webkit-animation-timing-function: ease;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: grow;
-moz-animation-duration: 2.2s;
-moz-animation-timing-function: ease;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
animation-name: grow;
animation-duration: 2.2s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
}
@-webkit-keyframes grow {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
@-moz-keyframes grow {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); height: 168px; width: 168px; }
}
@keyframes grow {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
回答by Bojangles
Here's a crude example of what you need to do: jsfiddle.net/UxtJV/. It uses a bit of JS to add a class to animate the circle. It's width, height, topand leftproperties are animated and it is given position: relative.
这是您需要执行的操作的粗略示例：jsfiddle.net/UxtJV/。它使用了一些 JS 来添加一个类来为圆圈设置动画。这是width，height，top和left属性的动画和它被赋予position: relative。
div.circle {
position: relative;
width: 0px;
height: 0px;
top: 50px;
left: 50px;
-webkit-transition-duration: 2s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease-in-out;
text-align: center;
background: red;
color: white;
border-radius: 100%;
padding: 20px;
overflow: hidden;
}
div.circle.open {
top: 0px;
left: 0px;
width: 100px;
height: 100px;
}?
回答by Eran Egozi
To do so, your animation should involve:
为此，您的动画应包括：
- increase width and height.
- increase top and left.
- 增加宽度和高度。
- 增加顶部和左侧。
It's a bit of a work, but it shall do exactly what you asked.
这有点工作，但它会完全按照你的要求做。
回答by Maroshii
回答by Armand
Just in case someone is looking for working jQuery solution, here it is...
以防万一有人正在寻找有效的 jQuery 解决方案，这里是...
HTML
HTML
<div class=circle1></div>
CSS
CSS
.circle1 {
position:absolute; top:50px; left:50px;
width: 0px; height: 0px;
border:1px solid red;
padding:20px;
border-radius:50%;
}
JS
JS
$(".circle1").mouseover(function() {
$(this).animate({top:"0", left:"0", width:"100px", height:"100px", opacity: 0}, 200);
}).mouseout(function() {
$(this).animate({top:"50px", left:"50px", width:"0", height:"0", opacity: 1}, 200);
});
And here is the demo - http://jsbin.com/esiLULEb/1/
这是演示 - http://jsbin.com/esiLULEb/1/
回答by Caner ?ahin
You don't have to use Jquery or Javascript for your case, you can achieve that with pure CSS.
您不必为您的案例使用 Jquery 或 Javascript，您可以使用纯 CSS 来实现。
Do not use position property on your animated divs. That will cause you laggy animations. Instead use transform for performant animations.
不要在动画 div 上使用 position 属性。这会导致你的动画滞后。而是对高性能动画使用变换。
<div class="circle__wrapper">
<a class="circle" href="#"></a>
</div>
/* circle__wrapper will help you to position the div in the center of the page */
.circle__wrapper {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.circle__wrapper a.circle {
display:block;
height: 168px;
width: 168px;
background-color: #fea733;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: growUp 2s 1.5s; /* You can remove 1.5s if you don't want delay */
-moz-animation: growUp 2s 1.5s;
-ms-animation: growUp 2s 1.5s;
-o-animation: growUp 2s 1.5s;
animation: growUp 2s 1.5s;
}
@-webkit-keyframes growUp {
0% { -webkit-transform: scale(0); }
100% { -webkit-transform: scale(1); }
}
@-moz-keyframes growUp {
0% { -moz-transform: scale(0); }
100% { -moz-transform: scale(1); }
}
@-o-keyframes growUp {
0% { -o-transform: scale(0); }
100% { -o-transform: scale(1); }
}
@-ms-keyframes growUp {
0% { -ms-transform: scale(0); }
100% { -ms-transform: scale(1); }
}
@keyframes growUp {
0% { transform: scale(0); }
100% { transform: scale(1); }
}
Hope this helps.
希望这可以帮助。
