问题描述
我有一个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>