如何在 CSS 动画中自下而上制作形状 "grow"，并使用 CSS 变量设置动画

Question

我有一个 css 圆柱体 (jsfiddle here)，看起来像这样：

我希望用 5 秒的动画将它投影到屏幕上，'grows' 从下到上。我用 'keyframes' 尝试了很多方向，但未能达到预期的结果。

.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,2px);
    background-color:var(--c,#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, 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>

Answer 1

1.将动画添加为变量：你不能传入像include_animation:true这样的设置，但是我们可以为动画传入一个有效值属性并使用它。

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

.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, 0, 0.75);

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

.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, 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 移动到 [=23]，使 tank class 容器和 :after 伪元素成为主要“填充” =]，并设置 bottom: 0 从底部开始：

.tank {
    box-shadow: 0px 0px 10px rgba(0, 0, 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, 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>

如何在 CSS 动画中自下而上制作形状 "grow"，并使用 CSS 变量设置动画

How to make a shape "grow" from the bottom up in CSS animations, and set the animation using a CSS variable

html

css

keyframe

css-animations