Tutorial CSS Transition und Transform und Keyframes

Keyframes CSS weiter unten

CSS für diese drei Boxen - von oben nach unten mit den IDs: myBox1, myBox2 und myBox3, die “Zwischen Head Tags” der Layout-HTML gehört.

<style>
    div#myBox1 {
        text-align: center;
        padding: 20px;
        display: table-cell;
        vertical-align: middle;
        background-color: yellow;
        border: 1px solid black;
        border-radius: 5px;
        opacity: 0.6;
        -webkit-transition: transform 1s; /* For Safari 3.1 to 6.0 */
        transition: transform 1s;
        -ms-transform: rotate(-20deg); /* IE 9 */
        -webkit-transform: rotate(-20deg); /* Safari */
        transform: rotate(-20deg); /* Standard syntax */
    }
   
    div#myBox1:hover {
        background-color: brown;
        opacity: 1;
        -ms-transform: rotate(0deg); /* IE 9 */
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* Standard syntax */
    }
   
    div#myBox2 {
        width: 100px;
        height: 100px;
        background: red;
        text-align: right;
        padding: 10px;
        display: table-cell;
        vertical-align: middle;
        -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
        transition: width 2s;
    }

    div#myBox2:hover {
        width: 400px;
    }

    div#myBox3 {
        width: 100px;
        height: 100px;
        background: red;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
        transition: width 2s, height 2s, transform 2s;
    }

    div#myBox3:hover {
        width: 300px;
        height: 300px;
        -webkit-transform: rotate(180deg); /* Safari */
        transform: rotate(180deg);
    }   
</style>

Für die oberste Box, mit der ID=myBox1, habe ich lediglich ein Textfeld auf die gewünschte Breite aufgezogen und diesem diese ID gegeben:

Bei den anderen beiden Boxen, mit der ID=myBox2 und der ID=myBox3, musste ich das <p> Tag auskommentieren, um die vorgegebene feste Breite von NOF auszuschalten. Hierzu habe ich das Auskommentieren des <p> Tags im HTML-Code Editor zunächst beendet --> und mein DIV mit der ID dort eingetragen. Am Ende der Zeile habe ich das Auskommentieren für den Objekt-Editor wieder eingeleitet <!--

--><div id="myBox2">Gehe mit der Maus über diese Box</div><!--

Im Objekt-Editor habe ich dann entsprechend am Beginn das Auskommentieren mit <!-- eingeleitet und nach dem Tag mit --> bendet.

CSS Keyframes - Animation und JavaScript Toggle-Effekt für den Link:

Hier habe ich diese CSS “Zwischen Head Tags” meiner Layout-HTML eingesetzt, wobei ich meinem Textfeld hier die ID="CookieHinweis" gegeben habe.

Dem Textfeld habe ich die Objekt-ID: “CookieHinweis” sowie einige direkte CSS-Anweisungen im Fenster “CSS-Eigenschaften” gegeben:

background-color: rgb(255,255,0);
box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
margin: auto;
opacity: 0.8;
bottom: 0;
left: 0;
position: fixed;
right: 0;
width: 100%;

Um das Textfeld mittels Toggle-Effekt zu schließen, habe ich folgenden JavaScript-Link verwendet:

> Text für Link markieren > Button “Link” > im Fenster “Link”  >  “Externer Link” mit “javascript:” wählen > void(); hinschreiben...

... und im Link-Fenster unten links auf den Button “HTML” klicken und im Tag (“innen”) das JavaScript “onclick” mit der ID CookieHinweis eintragen:

onclick="$('#CookieHinweis').slideToggle();return false;"

Ihr könnt dem Toggle-Effekt auch noch eine Zeit in Millisekunden geben, hier z.B. 1000 - also 1 Sekunde, nach Klick auf Link, bis dieser geschlossen ist.

onclick="$('#CookieHinweis').slideToggle(1000);return false;"

3D Animation:

Hierfür habe ich kein Tutorial geschrieben (guckt in meinen Quelltext “3D Animation”) und guckt für die Anleitung auf der Seite von: the-art-of-web.com

nach oben