Bewegen mit css

Ohne JavaSript können nur mit Einsatz von Änderungen bestehender css Eigenschaften Animationen geschaffen werden. Dazu gibt es zwei Möglichkeiten:

Transition

Die Änderung einer css Eigenschaft bei dieser Möglichkeit nur aufgrund eines Eventes möglich:

Button

 <style>
     .knopf:hover {
         transition:  background-color 3s;
         background-color: black;
     }
 </style>

 <a href="#" class="knopf">Button</a>

Die ersten 2 Paramerter und weitere optionale 2 bestimmen den Übergang:

• ccs Eigenschaft [ siehe: developer.mozilla ]
• Dauer des Überganges
• Ablaufverhalten, Varianten in der Abspielgeschwindigkeit, Art der Beschleunigung und Verzögerung [linear, ease, ease-in, ease-out, ease-in-out] oder Bezierangabe
• Verzögerung beim Start in Sekunden

Am einfachsten werden die Parameter der Reihe nach, durch ein Leerzeichen getrennt aufgeschrieben.

Gute Beschreibung mit anschaulichen Beispielen siehe: marksheet.io

Animation

 <style>
 .film {
     width: 50px;
     background-color: #4db44d;
     animation: linksrechts 4s ease infinite;
 }

 @keyframes linksrechts {
     30% {
          margin-left: 70%;
          background-color: gold;
     }

     100% {
          margin-left: 20%;
     }
 }
</style>
<div class="film">Film</div>
            

Eine Animation läuft Bild für Bild, wie ein Film in einem Daumenkino ab. Es wird kein Event zum Starten benötigt.

Zwei Punkte sind dabei festzulegen:

1. Definieren des Filmes mit Name des Filmes und was soll in welchem Bild geschehen im css des Elements

animation:

1. Die Position der Zwischenbilder, die die geänderte css Eigenschaft beschreiben, in % der Filmlänge
2. Welche css Eigenschaft sich an dieser Position ändern soll [ siehe: developer.mozilla ]

2. Wie soll dieser Film abgespielt werden

@keyframes

1. Name des Films
2. Dauer der Animation
3. Ablaufverhalten, Varianten in der Abspielgeschwindigkeit, Art der Beschleunigung und Verzögerung [linear, ease, ease-in, ease-out, ease-in-out] oder Bezierangabe
4. Verzögerung beim Start in Sekunden
5. Anzahl der Wiederholungen, oder infinite für eine Endlosschleife
6. Drehrichtung des Films: vorwärts - zurück: alternate, back, forth)
7. fill-mode

Gute Beschreibung mit anschaulichen Beispielen siehe: marksheet.io

Beispiele

Der Sourcecode des Beispiels, abgewandelt vom Beispielen im Tutorial auf marksheet.io

 <div class="huepfen">hüpfen</div>
 <div class="bewegen">bewegen</div>
 <div class="kreisen">kreisen</div>
 <div class="slider"><span class="slider">s</span><span class="slider">l</span><span class="slider">i</span><span class="slider">d</span><span class="slider">e</span><span class="slider">r</span></div>
 <div class="vor"> klickvor <span class="zurueck">/zurück</span></div>
 
 <style>
    .slider {
        width: 100%;
        background-color: _#FF80FF;
    }

    .slider {
        animation: animationName 4s ease infinite;
    }

    @keyframes animationName {
        0% {
            width: 0%;
            margin-left: 0%
        }

        50% {
            width: 20%;
            margin-left: 40%;
        }

        100% {
            width: 0%;
            margin-left: 0%;
        }
    }
 </style>

 <style>
    .bewegen {
        background-color: gold;
        width: 30%;
        animation: translating 4s linear infinite;
    }

    @keyframes translating {
        0% {
            transform: translate(0, 0);
        }

        25% {
            transform: translate(200%, 0);
        }

        50% {
            transform: translate(200%, 50px);
        }

        75% {
            transform: translate(0, 50px);
        }

        100% {
            transform: translate(0, 0);
        }
    }
 </style>

 <style>
    .kreisen {
        margin-left: 50%;
        width: 20%;
        animation: rotating 4s linear infinite;
    }

    @keyframes rotating {
        0% {
            transform: rotate(0deg);
        }


        20% {
            transform: rotate(180deg) translate(101px, 0);
            background-color: darkgreen;
        }

        100% {
            color: white;
            transform: rotate(360deg);
        }
    }
 </style>

 <style>
    .huepfen {
        animation: bouncing 0.5s cubic-bezier(0.1, 0.25, 0.1, 1) 0s infinite alternate both;
        width: 4em;
        padding-left: 10px;
    }

    @keyframes bouncing {
        0% {
            margin-left: 0.2em;
            width: 3.8em;
            padding-bottom: 0px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        100% {
            padding-left: 11px;
            box-shadow: 0 15px 10px rgba(0, 0, 0, 0.1);
        }
    }
 </style>

 <style>
    .vor {
        width: 100px;
        background-color: #FF80FF;
        position: absolute;
        left: 10px;
        transition: left 3s;
    }

    .slideright {
        background-color: #FF80FF;
        left: 200px;
    }

    .zurueck {
        width: 2;
        position: absolute;
        right: 2px;
        transition: right 3s;
    }

    .slideleft {
        background-color: #80fff5;
        left: -70px;
    }
 </style>

 <script>
    var nach_vorne = function() {
        document.querySelector(".vor").classList.add("slideright");
    }

    var zurueck = function() {
        document.querySelector(".vor").classList.add("slideleft");
    }

    var art_des_signals = "click";

    var portier = document.querySelector(".vor");
    portier.addEventListener(art_des_signals, nach_vorne);

    //var art_des_signals = "click";
    portier = document.querySelector(".zurueck");
    portier.addEventListener(art_des_signals, zurueck);
 </script>

Quellen

Nützliche Links zur Hilfestellung für css Annimationen und Transformationen

Transformation
Animation
Animations Generator von TheAppGuruz
AngryTools
Werner Zenk ab Scrollposition
Bezier Kurve ein Codegenerator für Animationen.