如何在CSS动画中从下至上使形状“增长”，并使用CSS变量设置动画

如何解决如何在CSS动画中从下至上使形状“增长”，并使用CSS变量设置动画

我有一个css柱面（jsfiddle here），看起来像这样：

我希望通过5秒钟的动画将其投影到屏幕上，使其“自底向上”生长。我已经尝试过使用“关键帧”进行多种定向，但是未能达到预期的效果。

.tank {
    position:relative;
    width:12px;
    height: var(--h,2px);
    bottom: var(--h,2px);
    background-color:var(--c,#444); 
    opacity: 0.85;
    animation: move-me-up 5s;
}
.tank:before {
    width: 12px;
    height: 5px;
    background-color:var(--s,#666);
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    position:absolute;
    content:'';
    top:-2.5px;
    
}
.tank:after {
    width: 12px;
    height: var(--h,#444);
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    position:absolute;
    content:'';
    top:1px;
    Box-shadow:0px 0px 10px rgba(0,0.75);
    z-index: -1;    
    
}


@keyframes move-me-up {
  0% {
    height: 2px;
  }
 
  100% {
    height: var(--h,2px);
  }
}

<BR><BR><BR><BR>
<BR><BR><BR><BR>
<div class="tank" style="--h:120px;--c:#186b03;--s:#50d130"></div>

此外，我想知道如何在创建div时使用include_animation: true/false之类的东西将此动画定义为可选内容：

示例（伪）

<div class="tank" style="--h:120px;--c:#186b05;--s:#50d135; include_animation:true"></div>

解决方法

1。要将动画添加为变量：您不能传入include_animation:true之类的设置，但是我们 所能做的就是为animation属性传入有效值并使用它

我们可以创建一个变量，例如--animation并将其值设置为我们要运行的动画，例如--animation:move-me-up。这意味着您需要指定动画的确切名称，因此默认情况下运行动画可能会更容易，并将变量none设置为 prevent 阻止动画运行，例如：

.tank {
    /* move-me-up is the default animation. 
       Set --animation to "none" for no animation,or you could even set another animation name */
    animation-name: var(--animation,move-me-up);
    animation-duration: 5s;
    /* Rest of the CSS... */
}

您可以在下一部分的示例中看到它的工作。

---

2。使动画正常工作：在jsfiddle中看不到animation的原因是，.tank:after的CSS显示了完整的坦克，因此动画被隐藏了。如果您从CSS中删除此行，则可以看到它起作用：

.tank:after {
    /* other CSS.. */
    background-color:var(--c,#444); /* Remove this line */
}

但是现在，动画将从顶部开始并向下扩展，整个元素的高度正在变化，并且默认情况下会向下扩展，因此我们需要执行步骤3。

---

3。让动画从底部开始“增长” 。我们可以在keyframes中很容易地做到这一点，只需将top的值与开始时的bottom相同，它在top:0处完成：

@keyframes move-me-up {
  0% {
    height: 0;
    top: var(--h,2px);   /* the top of the tank starts at the bottom */
  }
  100% {
    height: var(--h,2px);  
    top: 0;              /* when it finishes,top is at 0 (i.e. the top of the parent) */
  }
}

坦克从底部开始生长的示例，并且还没有使用变量设置动画

.tank {
    position:relative;
    width:12px;
    height: var(--h,2px);
    background-color:var(--c,#444); 
    opacity: 0.85;
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    box-shadow:0px 0px 10px rgba(0,0.75);

    /* ADD THE ANIMATION. 
    move-me-up is the default animation. 
    set --animation to "none" for no animation,move-me-up);
    animation-duration: 5s;
}

.tank:before {
    width: 12px;
    height: 5px;
    background-color:var(--s,#666);
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    position:absolute;
    content:'';
    top:-2.5px;
}

.tank:after {
    width: 12px;
    height: var(--h,2px);
    -moz-border-radius: 6px / 2.5px;
    -webkit-border-radius: 6px / 2.5px;
    border-radius: 6px / 2.5px;
    position:absolute;
    content:'';
    top:1px;
    z-index: -1;      
}


@keyframes move-me-up {
  0% {
    height: 0;
    top: var(--h,2px);
    box-shadow:0px 0px 10px rgba(0,0.75);
  }
 
  100% {
    height: var(--h,2px); 
    top: 0;
  }
}


/* for displaying the example only */
.tank { float:left; margin-right: 50px; }

<div class="tank" style="--h:120px;--c:#186b05;--s:#50d135;"></div>

<div class="tank" style="--h:120px;--c:#186b05;--s:#50d135; --animation:none"></div>

4。替代方法：从底部填充一个空的水箱：如果您想显示一个“空”水箱并从底部填充它，可以按以下步骤进行操作：

通过将背景和动画从tank移到:after，然后设置.tank类，将容器和.tank:after伪元素作为主要的“填充” bottom: 0从底部开始：

.tank {
    box-shadow: 0px 0px 10px rgba(0,0.75); /* Add this */
    /* Rest of the CSS...*/
}
.tank:after {
    bottom: 0;                         /* Start at the bottom and grow up */
    background-color: var(--c,#444);  /* moved from .tank to give this element has the "fill" */
    animation: move-me-up 5s;          /* moved from .tank to animate the fill */
    /* Rest of the CSS...*/
}

工作示例：

.tank {
  position: relative;
  width: 12px;
  height: var(--h,2px);
  box-shadow: 0px 0px 10px rgba(0,0.75);
}

.tank:before {
  width: 12px;
  height: 5px;
  background-color: var(--s,#666);
  -moz-border-radius: 6px / 2.5px;
  -webkit-border-radius: 6px / 2.5px;
  border-radius: 6px / 2.5px;
  position: absolute;
  content: '';
  top: -2.5px;
}

.tank:after {
  width: 12px;
  height: var(--h,2px);
  content: '';
  z-index: -1;
  position: absolute;

  -moz-border-radius: 6px / 2.5px;
  -webkit-border-radius: 6px / 2.5px;
  border-radius: 6px / 2.5px;

  background-color: var(--c,#444);   /* this element has the "fill" */
  bottom: 0;                          /* Start at the bottom and grow up */

  /* ADD THE ANIMATION. 
  move-me-up is the default animation. 
  set --animation to "none" for no animation,or you could even set another animation name */
  animation-name: var(--animation,move-me-up);
  animation-duration: 5s;
}

@keyframes move-me-up {
  0% {
    height: 2px;
  }
  100% {
    height: var(--h,2px);
  }
}

<div class="tank" style="--h:120px;--c:#186b05;--s:#50d135;"></div>