CSS3 Animations

transition: property duration; # basic transition
transition: all 0.3s ease; # all properties
transition-property: opacity; # specific property
transition-duration: 0.5s; # duration
transition-timing-function: ease-in; # timing
transition-delay: 0.2s; # delay

ease # slow start, fast, slow end
linear # constant speed
ease-in # slow start
ease-out # slow end
ease-in-out # slow start and end
cubic-bezier(0.1, 0.7, 1.0, 0.1) # custom

@keyframes slide {
    from { left: 0; }
    to { left: 100px; }
}
@keyframes fade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

animation-name: slide; # keyframe name
animation-duration: 2s; # duration
animation-timing-function: ease; # timing
animation-delay: 1s; # delay
animation-iteration-count: infinite; # repeat
animation-direction: alternate; # direction

animation: slide 2s ease 1s infinite alternate; # all properties