扩大与CSS3动画界 [英] Expanding circles with CSS3 animations

问题描述

我想使它所以当页面加载界出现是好的，但我需要他们向外生长，所以从小到大，从中心不是从左上角：

您可以看到我目前有此： http://thomasbritton.co.uk/projects/欧洲复兴开发银行/

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

任何想法？

下面是我的CSS也为动画部分：

  .circle一个{
  边界半径：150像素;
  颜色：#FFF;
  高度：0;
  位置：绝对的;
  文字修饰：无;
  宽度：0;
}.circle a.grow {
  -webkit-动画名称：成长;
  -webkit-动画持续时间：2.2S;
  -webkit-动画定时功能：缓解;
  -webkit-动画迭代计数：1;
  -webkit-动画方向：正常;
  -webkit-动画延迟：0;
  -webkit-动画播放状态：运行;
  -webkit-动画填充模式：前锋;  -moz-动画名称：成长;
  -moz-动画持续时间：2.2S;
  -moz-动画定时功能：缓解;
  -moz-动画迭代计数：1;
  -moz-动画方向：正常;
  -moz-动画延迟：0;
  -moz-动画播放状态：运行;
  -moz-动画填充模式：前锋;  动画名称：成长;
  动画持续时间：2.2S;
  动画定时功能：缓解;
  动画迭代计数：1;
  动画方向：正常;
  动画延迟：0;
  动画播放状态：运行;
  动画填充模式：前锋;
}@ -webkit-关键帧增长{
  0％{-moz-变换：规模（0）; }
  100％{-moz-变换：规模（1）; }
}@ -moz-关键帧增长{
  0％{-moz-变换：规模（0）; }
  100％{-moz-变换：规模（1）;高度：168px;宽度：168px; }
}@keyframes增长{
  0％{-moz-变换：规模（0）; }
  100％{-moz-变换：规模（1）; }
}
 

解决方案

下面是你需要做的粗例如： jsfiddle.net / UxtJV / 。它使用了一下JS的添加类的动画圆。这是宽度，高度，顶和左属性的动画和它被赋予位置：相对

  div.circle {
    位置：相对;    宽度：0像素;
    高度：0像素;
    顶部：50像素;
    左：50像素;    -webkit-过渡时间：2秒;
    -webkit-过渡属性：所有;
    -webkit-过渡定时功能：易于在出;    文本对齐：中心;
    背景：红色;
    颜色：白色;
    边界半径：100％;
    填充：20像素;
    溢出：隐藏;
}div.circle.open {
    顶：0像素;
    左：0像素;
    宽度：100像素;
    高度：100像素;
}
 

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/

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

Any ideas?

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

解决方案

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屋！