使用CSS3动画扩展圆圈

我试图这样做，当页面加载圆圈出现，这是好的，但我需要它们向外生长，从中心到小到大，而不是从左上角：

你可以看到我目前在这里： http ： //thomasbritton.co.uk/projects/ebrd/

理想情况下，希望这可以在CSS中完成，但如果它更容易/更稳定，可以使用JS。

有任何想法吗？

这是动画部分我的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); } } 

Answer 1

以下是您需要做的一个粗略示例： 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; }​ 

Answer 2

为此，您的动画应包括：

1. 增加宽度和高度。
2. 增加顶部和左侧。

这是一项工作，但它应该完全按照你的要求行事。

Answer 3

您可以尝试将动画与翻译属性结合使用。

这可能是另一种选择：

 transform-origin: top right; /* 50% 50% or whatever*/ 

发布在这里 …

Answer 4

万一有人正在寻找有效的jQuery解决方案，这里是……

HTML

CSS

 .circle1 { position:absolute; top:50px; left:50px; width: 0px; height: 0px; border:1px solid red; padding:20px; border-radius:50%; } 

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); }); 

这是演示 – http://jsbin.com/esiLULEb/1/

Answer 5

您不必为您的案例使用Jquery或Javascript，您可以使用纯CSS实现这一点。

不要在动画div上使用position属性。 这将导致你迟钝的动画。 而是使用变换来执行高性能动画。

 
  
 /* 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); } } 

希望这可以帮助。