动画伪CSS元素-任何框架？

Question

I was working on creating a bar chart, which had pseudo css elements (::before, ::after).

While I got it to a point where the bars look nice, I can't find a good way to animate the height changes. When I use the animate function, the pseudo elements disappear, and only appear when the animation completes. Anyone else has an idea on how to achieve this? Is there any other animation framework that will render the pseudo elements as well?

CodePen: http://codepen.io/anon/pen/OyGamW

HTML

<ul><li><div class="fill bar1">100%</div></li></ul>

CSS:

*{
  padding:0;
  margin: 0;
}
body {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
  background:#cdcdcf;
  overflow: hidden;
}

ul {
  list-style-type:none;
  overflow:hidden;
  padding-left:10px;
  padding-top:40px;
}
li{
float:left;
height:800px;
margin-top: 30px;
}

.fill {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 90px;
  line-height: 90px;
  position: relative;
  height: 300px;
  top: 161px;
  padding: 0px 0px 0px 8px;
  left: 70px;
  border: none;
  font: normal normal bold 26px/normal Tahoma, Geneva, sans-serif;
  color: rgba(255,255,255,1);
  text-align: left;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(0deg, rgba(255,43,43,1) 0, rgba(209,31,31,1) 100%);
  background: -moz-linear-gradient(90deg, rgba(255,43,43,1) 0, rgba(209,31,31,1) 100%);
  background: linear-gradient(90deg, rgba(255,43,43,1) 0, rgba(209,31,31,1) 100%);
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  -webkit-transform:  scaleX(1) scaleY(1) scaleZ(1)  skewY(-3deg);
  transform:  scaleX(1) scaleY(1) scaleZ(1)  skewY(-3deg);
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
  -webkit-box-shadow: 0 11px 18px -5px #841313 inset;
  box-shadow: 0 11px 18px -5px #841313 inset;
}

.fill::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  border: none;
  font: normal normal normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(0, 0, 0, 0.901961);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(-180deg, #c62121 0, rgba(132,19,19,1) 100%);
  background: -moz-linear-gradient(270deg, #c62121 0, rgba(132,19,19,1) 100%);
  background: linear-gradient(270deg, #c62121 0, rgba(132,19,19,1) 100%);
  background-position: 50% 50%;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto;
  background-size: auto auto;
  text-shadow: none;
  -webkit-transform:  scaleX(1) scaleY(1) scaleZ(1) translateX(-44px) skewY(20deg);
  transform:  scaleX(1) scaleY(1) scaleZ(1) translateX(-44px) skewY(20deg);
  -webkit-transform-origin: 100% 100% 0;
  transform-origin: 100% 100% 0;
  -webkit-box-shadow: 0 11px 18px -5px #841313 inset;
  box-shadow: 0 11px 18px -5px #841313 inset;
}

.fill::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 16.1px;
  position: absolute;
  content: "";
  top: -1px;
  left: 0;
  border: none;
  font: normal normal normal 16px/normal "Times New Roman", Times, serif;
  color: rgba(0, 0, 0, 0.901961);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: rgba(132,19,19,1);
  text-shadow: none;
  -webkit-transform:  scaleX(1) scaleY(1) scaleZ(1) translateX(-50%) translateY(-91%) skewX(70.5deg);
  transform:  scaleX(1) scaleY(1) scaleZ(1) translateX(-50%) translateY(-91%) skewX(70.5deg);
  -webkit-transform-origin: 0 0 0;
  transform-origin: 0 0 0;
}

JS:

$(document).ready(function() {
    setInterval(function() {
        doAnimation();
    },4000);
    doAnimation();
});
function doAnimation() {
  $('.fill').animate({ "height": "150px", "top": "311px"}, 1000);
  $('.fill').delay(1000).animate({ "height": "300px", "top": "161px"}, 1000);
}

Thanks

Answer 1

Not exactly sure how GSAP 's TweenMax differs from jQuery 's .animate() method in this particular case but replacing your animation with TweenMax does solve your problem.

JavaScript:

TweenMax.to('.fill', 1, {
  height: 150,
  top: 311,
  repeat: -1,
  yoyo: true,
  ease: Expo.easeInOut
});

As a side note, I would strongly recommend using GSAP for all your JS animation needs. Look into the documentation for available methods and properties.

Here is your forked pen.

Hope this helps.