Animate square div into trapezoid

Question

As title states, I am trying to animate a square div into a trapezoid using jquery .animate(). However, the only animation I am getting is the width adjustment and I am not quite sure why this is occuring.

$(function () {
    $('.square').hover(function () {
        $(this).animate({
            borderRight: '100px solid red',
            borderTop: '50px solid transparent',
            borderBottom: '50px solid transparent',
            height: '100px',
            width: '0'
        });
    });
});

div.square {
    height: 100px;
    width: 100px;
    background-color: red;
}
div.left {
	border-right: 100px solid red;
	border-top: 50px solid transparent;
	border-bottom: 50px solid transparent;
	height: 100px;
	width: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>


<div class="left"></div>

Answer 1

I would use classes and css transitions:

$(function () {
    $('.square').hover(function () {
        $(this).removeClass('square').addClass('left');
    });
});

div.square {
    height: 100px;
    width: 100px;
    background-color: red;
}
div.left {
    border-right: 100px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    height: 100px;
    width: 0;
    
    -webkit-transition: all  500ms ease-out;
    -moz-transition: all  500ms ease-out;
    -o-transition: all  500ms ease-out;
    transition: all 500ms ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="square"></div>