Plugin Elementor: How to create your own input animation?

In Elementor it is relatively easy to create your own input animations. The following structure is for rough orientation and can be easily transferred to your own animation.

function my_entrance_animations() {
  return array(
      'Basic Scale Animations' => [
            'stretchLeft' => 'Strentch Left',
            'stretchRight' => 'Stretch Right',
            'stretchDown' => 'Strentch Down',
            'stretchUp' => 'Strentch Up',				
    ],
  );
}
add_filter( 'elementor/controls/animations/additional_animations', 'my_entrance_animations' );

/* Stretch Left */
.stretchLeft{
  animation-name: stretchLeft;
    transform-origin: 100% 0%;
}
@keyframes stretchLeft {
  0% {transform: scaleX(0);}
  100% {transform: scaleX(1);}										
}
/* Stretch Right */
.stretchRight{
  animation-name: stretchRight;
    transform-origin: 0% 0%;		
}
@keyframes stretchRight {
  0% {transform: scaleX(0);}
  100% {transform: scaleX(1);}			
}
/* Stretch Down */
.stretchDown{
  animation-name: stretchDown;
    transform-origin: 50% 0%;
}
@keyframes stretchDown {
  0% {transform: scaleY(0);}
  100% {transform: scaleY(1);}		
}
/* Stretch Up */
.stretchUp{
  animation-name: stretchUp;
    transform-origin: 50% 100%;		
}
@keyframes stretchUp {
    0% {transform: scaleY(0);}
    100% {transform: scaleY(1);}			
}