Animation is to create the illusion of life.

Drawing from Disney's twelve basic principles of animation as described by Disney animators Ollie Johnston and Frank Thomas in their 1981 book The Illusion of Life: Disney Animation, CSS transitoins and animations have timing properties so that animations do not have to be linear and mechanical.

CSS Transition

CSS transitions allows you to change property values smoothly, over a given duration. Using the transition-timing-function property you may specify the speed curve of the animation.
transition-timing-function: linear; | ease; | ease-in; | ease-out; | ease-in-out; | step-start; | step-end; | steps(int,start|end); | cubic-bezier(n,n,n,n); | initial; | inherit;

"Transitions are the grease in the wheel of CSS transforms. Without a transition, an element being transformed would change abruptly from one state to another. By applying a transition you can control the change, making it smooth and gradual." From thoughtbot blog

CSS Animation

CSS allows animation of HTML elements without using JavaScript. Using the animation-timing-function property you may specify the speed curve of the animation.
animation-timing-function: linear; | ease; | ease-in; | ease-out; | ease-in-out; | step-start; | step-end; | steps(int,start|end); | cubic-bezier(n,n,n,n); | initial; | inherit;

One of the major differences between animations and transitions is in how you trigger them to start playing. A transition only plays as a reaction to a CSS property that has changed. Animations, on the other hand, don't require any explicit triggering. Once you define the animation, it will start playing automatically. Transitions don't have a looping function, such as animation-iteration-count or the ability to create keyframes. From KIRUPA blog

ease-in
ease-out

Each of the boxes above have the same CSS transition property - transition: width 2s, background-color 4s, transform 2s;. The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay, so ease-in or ease-in-out could be included for each effected property, i.e. transition: width 2s ease-in-out. However, for demonstration, the one on the left has transition-timing-function: ease-in; - slower at the start of the transition than at the end, and the one on the right transition-timing-function: ease-out; - slower at the end. "transition-timing-function" property

linear
ease-in-out

Each of the boxes above have the same CSS animation property - animation: moveLeft 5s infinite;. The animation CSS property is a shorthand property for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. For demonstration, the first one has animation-timing-function: linear; and the second animation-timing-function: ease-in-out;. "transition-timing-function" property

cubic-bezier(n,n,n,n); A cubic Bézier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios of time. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state. The values are floats (floating point number) or decimals from 0-1. CSS cubic-bezier() function may be used with transitions or animations:
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

There are online tools to help visualize cubic-bezier for css transitions or animations: cubic-bezier tool by Lea Verou; Easing functions by Andrey Sitnik and Ivan Solovev

More Reading

MDN timing-function; MDN transitions; MDN animation; W3Schools transitions; W3Schools animations;