%Teilweise Erzeugt mit dem LaTeX-Generator: http://latex.sehnot.de

%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

%Hyperlinks
\usepackage{multicol}




%Kopfzeile
\ihead{CSS}
\chead{}
\ohead{http://kohnlehome.de/html/css-animation.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
CSS Animation
\end{center}

\section*{CSS}
\begin{verbatim}
element {
    ...
    animation-name: NAME_DER_ANIMATION;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
\end{verbatim}

\subsection*{Anfangs- und Endzustand definieren}
\begin{verbatim}
@keyframes NAME_DER_ANIMATION {
  from {
  	  /* CSS beim Start der Animation */
  }
  to {
      /* CSS beim Ende der Animation */
  }
}
\end{verbatim}

\subsection*{oder Zwischenschritte definieren}
\begin{verbatim}
@keyframes NAME_DER_ANIMATION {
  0%   { /* CSS beim Start der Animation */ }
  25%  { ... }
  50%  { ... }
  100% { /* CSS beim Ende der Animation */ }
}
\end{verbatim}

\end{document}
