Greensock TweenLite проблема при анимации границы свойство короткой руки

Question

Я использую Greensock TweenLite, и мне нужно анимировать границу для элемента DOM.

Как вы можете видеть, что внутренний стиль установлен: border: solid 0px yellow

и использование TweenLite я прохожу в качестве конечного результата

border: "solid 20px blue"

но анимация не выполняется.

Я хотел бы знать, поддерживаются ли сокращенное свойство и/или если существует работа.

var element = document.getElementById('target'); 
 

 
TweenLite.to(element, 2, { 
 
    border: "solid 20px blue" 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> 
 
<div id="container" style="perspective: 200px"> 
 
    <div id="target" style=" width: 250px; height: 250px; background-color: red; font-size: 100px; border: solid 0px yellow;">Hello</div> 
 
</div>

Answer 1

Он должен быть 20px solid blue (не solid 20px blue)

  ^^^^--- Size goes first 

var element = document.getElementById('target'); 
 
TweenLite.to(element, 2, {border: "20px solid blue"});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> 
 
<div id="container" style="perspective: 200px"> 
 
    <div id="target" style=" width: 250px; height: 250px; background-color: red; font-size: 100px; border: solid 0px yellow;">Hello</div> 
 
</div>