Die yellow-fade-Technik mit CSS3-animations

by Jens Grochtdreis

HTML

<ul>
    <li><a href="#eins">Däumelieschen</a></li>
    <li><a href="#zwei">Die Störche</a></li>
    <li><a href="#drei">Der fliegende Koffer</a></li>
    <li><a href="#vier">Fliedermütterchen</a></li>
    <li><a href="#fuenf">Der Tannenbaum</a></li>
</ul>

<p id="eins">Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben. Wenn ich gewußt hätte, daß Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben — da hätte ich wahrlich was Besseres schreiben können als diesen Stuß. Was sollen Sie jetzt von mir denken? Bisher haben Sie Konstantin Jacoby vielleicht für einen ganz ordentlichen Kreativen gehalten — und dann das hier! Ehrlich gesagt: Ich weiß auch nicht, wie mir das passieren konnte. Eine Worthülse nach der anderen! Buchstabe an Buchstabe — Inhalt aber gleich Null. Vermutlich geben Sie mir nie einen Auftrag, nachdem Sie das hier gelesen haben — da kann ich soviel Goldmedaillen haben, wie ich will. Dies ist der Beweis: Jacoby kann’s einfach nicht, Schluß aus! Zu meiner Entschuldigung kann ich nur sagen: Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben. </p>
<p id="zwei">Wenn ich gewußt hätte, daß Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben — da hätte ich wahrlich was Besseres schreiben können als diesen Stuß. Was sollen Sie jetzt von mir denken? Bisher haben Sie Konstantin Jacoby vielleicht für einen ganz ordentlichen Kreativen gehalten — und dann das hier! Ehrlich gesagt: Ich weiß auch nicht, wie mir das passieren konnte. Eine Worthülse nach der anderen! Buchstabe an Buchstabe — Inhalt aber gleich Null. Vermutlich geben Sie mir nie einen Auftrag, nachdem Sie das hier gelesen haben — da kann ich...

CSS

body {padding: 20px;}
ul   {margin-bottom: 20px;}
p    {margin-bottom: 20px; padding: 5px;}

p:target {
    background-color: #fff;
    -webkit-animation: target-fade 4s 1;
       -moz-animation: target-fade 4s 1;
        -ms-animation: target-fade 4s 1;
            animation: target-fade 4s 1;
}

@-webkit-keyframes target-fade {
    0%       { background-color: #fff; padding: 0;}
    75%      { background-color: #f7d484; padding: 20px;}
    100%     { background-color: #fff; padding: 0;}
}
@-moz-keyframes target-fade {
    0%       { background-color: #fff; padding: 0;}
    75%      { background-color: #f7d484; padding: 20px;}
    100%     { background-color: #fff; padding: 0;}
}
@-ms-keyframes target-fade {
    0%       { background-color: #fff; padding: 0;}
    75%      { background-color: #f7d484; padding: 20px;}
    100%     { background-color: #fff; padding: 0;}
}
@keyframes target-fade {
    0%       { background-color: #fff; padding: 0;}
    75%      { background-color: #f7d484; padding: 20px;}
    100%     { background-color: #fff; padding: 0;}
}