How to smoothly expand and collapse panel width in TMS WEB Core?

I've made a simple UI in Delphi with two buttons and a panel. The one button collapses my panel and the other button expands the panel, but the expand and collapse are currently instant instead of smooth or gradual like an animation.

This is my form and DFM code:

object Form1: TForm1
  Width = 915
  Height = 662
  object layHeader: TWebPanel
    Left = 0
    Top = 0
    Width = 915
    Height = 60
    Align = alTop
    TabOrder = 0
    object btnCollapse: TWebButton
      AlignWithMargins = True
      Left = 10
      Top = 10
      Width = 96
      Height = 40
      Margins.Left = 10
      Margins.Top = 10
      Margins.Right = 0
      Margins.Bottom = 10
      Align = alLeft
      Caption = 'Collapse'
      HeightPercent = 100.000000000000000000
      WidthPercent = 100.000000000000000000
      OnClick = btnCollapseClick
    end
    object btnExpand: TWebButton
      AlignWithMargins = True
      Left = 116
      Top = 10
      Width = 96
      Height = 40
      Margins.Left = 10
      Margins.Top = 10
      Margins.Right = 0
      Margins.Bottom = 10
      Align = alLeft
      Caption = 'Expand'
      ChildOrder = 1
      HeightPercent = 100.000000000000000000
      WidthPercent = 100.000000000000000000
      OnClick = btnExpandClick
    end
  end
  object layPanel: TWebPanel
    Left = 0
    Top = 60
    Width = 115
    Height = 602
    Align = alLeft
    Caption = 'Collapsed'
    ChildOrder = 1
    Color = clHighlight
    TabOrder = 1
  end
end

And this is the code I'm using for the two buttons to expand and collapse my panel:

procedure TForm1.btnCollapseClick(Sender: TObject);
begin
  layPanel.Caption := 'Collapsed';
  layPanel.Width := 115;
end;

procedure TForm1.btnExpandClick(Sender: TObject);
begin
  layPanel.Caption := 'Expanded';
  layPanel.Width := 500;
end;

How can I modify my code so that the expansion and collapse aren't instant, but smooth? It needs to smoothly transition from collapsed to expanded and vice versa.

Thanks @PeterWolf for his comment about rather using CSS transition.

So I simply added the following line of code onto my form's onCreate method:

layPanel.ElementHandle.style.setProperty('transition','width 1s');

I'm adding a transition of 1s (1 second) for width.

And that's it. Now it works.

Here's my full code now:

procedure TForm1.btnCollapseClick(Sender: TObject);
begin
  layPanel.Caption := 'Collapsed';
  layPanel.Width := 115;
end;

procedure TForm1.btnExpandClick(Sender: TObject);
begin
  layPanel.Caption := 'Expanded';
  layPanel.Width := 500;
end;

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  layPanel.ElementHandle.style.setProperty('transition','width 1s');
end;

This was a really simply and great solution!

It now very smoothly expands and collapses!