Animation Class	Description	Example
.fade-in{animation:fadeIn 21s 4 }@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}	Scales thenamed element to cycle between full opacity [transparency] and zero opacity in time in seconds and cycles specified. infinity may be specified as a cycle number.
.fade-out{animation:fadeout 21s 4}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}	Scales the named element to cycle between zero opacity [transparency] and full opacity in time in seconds and cycles specified. infinity may be specified as a cycle number.
.z-animate-zoom{animation:animatezoom 21s 4}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}	Scales the named element from zero to full size in time in seconds and cycles specified. infinity may be specified as a cycle number.
.delay { animation-name: wait; animation-delay: 10s; animation-duration: 21s; animation-iteration-count: 4; } @keyframes wait{0%{opacity:0}100%{opacity:1}}	The animation will start after a delay of 10 seconds and will cycle for the number of times specified in the iteration-count.
.animate-left{position:relative;animation:animateleft 30s 3}@keyframes animateleft{from{left:-900px;top:-400px} to{left:0px;top:0px;}}	The end position of the named animation is always left:0px; top:0px; when the position:relative; is used. The advantage is that the position of the animation does not have to be styled. .

You may find this a little overwhelming at first but give it a try. Vary the animation properties delay duration iteration-count values and the @keyframes properties from to and opactity values until the effect you are trying to achieve is attained. Opacity values, between 0 and 1, are 0.1 thru 0.9. The lower the value the more transparent the image is. Doing this will give you a better understanding of the animations. Besides its a lot of fun. Try these codes in The Professor's PC Testbed where the animations may be tested.