使用CSS3动画扩展圈子 [英] Expanding circles with CSS3 animations

问题描述

我想让页面加载圈子时出现这是很好，但我需要他们向外成长，所以小到大从中心，而不是从左上角：

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:

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

You can see what I have currently here: http://thomasbritton.co.uk/projects/ebrd/

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

Ideally, want this to be done in CSS but can use JS if it's easier/more stable.

任何想法？

这里是我的css也是动画部分：

Here is my css also for the animation part:

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

推荐答案

您需要做什么： jsfiddle.net/UxtJV/ 。它使用一点JS添加一个类来动画圈子。 width ， height ， top 和 left 属性是动画，并且给出 position：relative 。

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, top and left properties are animated and it is given 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;
}​

这篇关于使用CSS3动画扩展圈子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！