Dynamic Presence

We stand for dynamic premium mobility. As such, movements in the Audi look have a typically dynamic character. The basis for this is an animation curve: inspired by the dynamic performance of our cars, it is based on a powerful acceleration at the start and a fast deceleration at the end.

Animation Curve


CSS definition for web applications

transition-timing-function: cubic-bezier(0.75, 0.02, 0.5, 1);

Definition for Apple iOS Apps

[[CAMediaTimingFunction alloc] initWithControlPoints:0.75f:0.02f:0.5f:1.0f]

Definition for Google Android Apps


Definition for motion design in Adobe After Effects

Outgoing Velocity: 75%
Incoming Velocity: 95%



Direction of Movement

Elements are moved either horizontally or vertically but not at an angle.



Transformation into a different state is controlled by means of scaling. Scaling can be combined with other animation parameters, such as a movement.



The showing and hiding of elements is controlled by means of opacity. Change in opacity can be combined with other animation parameters, such as a movement, in order to create a more dynamic experience.



Rotation is limited to small elements and is not combined with other animation parameters.



The duration of an animation depends on the size of the elements and the distance it covers.

If there are several elements or animation stages, a clear-cut sequence should be defined. As few elements as possible are animated simultaneously.

Your CI-Support
May we help you?