Анимировать псевдо CSS-элементы - любые рамки?

Question

Я работал над созданием гистограммы с элементами псевдо css (:: before, :: after).

Пока я добрался до точки, где бары выглядят красиво, я не могу найти хороший способ оживить изменения высоты. Когда я использую функцию animate, псевдоэлементы исчезают и появляются только после завершения анимации. У кого-нибудь еще есть идея о том, как достичь этого? Есть ли еще одна анимационная среда, которая также будет отображать псевдоэлементы?

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

Благодаря

Answer 1

Не совсем уверен, как GSAP «s TweenMax отличается от JQuery» .animate() метода s в данном конкретном случае, но заменяя анимацию с TweenMax действительно решить вашу проблему.

JavaScript:

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

Как примечание стороны, я бы настоятельно рекомендовал использовать GSAP для всех ваших потребностей JS анимации. Посмотрите на documentation на наличие доступных методов и свойств.

Here это ваше разветвленное ручка.

Надеюсь, это поможет.