Register for your free account! | Forgot your password?

Go Back   elitepvpers > Coders Den > General Coding > Coding Tutorials
You last visited: Today at 08:23

  • Please register to post and access all features, it's quick, easy and FREE!


CSS3 - Keyframe Animationen, Transitions und co. für euch erklärt

Reply
 
Old   #1
 
elite*gold: 0
Join Date: Apr 2016
Posts: 18
Received Thanks: 13
Thumbs up CSS3 - Keyframe Animationen, Transitions und co. für euch erklärt

Allgemein CSS3

Mit CSS3 kommen einige sehr nützliche und coole Eigenschaften zum alternativen CSS dazu. Abgerundete Ecken erzeugt man schlicht mit einer Zeile Code. Oder animiert Elemente ganz simpel ohne Javascript. So schön und einfach das ganze auch klingt, muss man sich vor dem Anwenden der Eigenschaften immer über die Browserunterstützung der Eigenschaften informieren, da noch nicht alle Browser die neuen CSS3 Eigenschaften unterstützen. Ich empfehle immer einen Fallback für die Eigenschaften zu haben.


Wichtig: Um den Lerneffekt zu steigern könnt ihr meine Beispiele kopieren und selber Lokal auf dem Rechner ausprobieren oder gerne auch Online Tools wie JSFiddle brauchen.

Überall wo im Code MENTION=1053529 erwähnt wird, ist ein @ gemeint.

Welche Eigenschaften sind neu dazugekommen?
  • transition
  • border-radius
  • box-shadow
  • text-shadow
  • opacity
  • rgba colors
  • background-clip
  • keyframe animations
  • rotate
  • gradient

Es gibt noch einige mehr… Ich wollte jetzt nicht alle aufzählen, doch die oben stehenden sind so ziemlich die meinst gebrauchten CSS3 Eigenschaften. Ich persönlich finde “transitions”, “keyframe animations”, “box-shadow” und “border-radius” die besten Eigenschaften von CSS3. Deshalb stelle ich euch diese mal kurz vor und erkläre wie sie funktionieren.

Transitions

Diese CSS3 Eigenschaft macht nichts anderes als einen flüssigen Übergang zwischen den verschiedensten anderen Eigenschaften zu erschaffen welche durch CSS-Events wie hover ausgelöst werden können.

Beispiel

HTML Code:
<div class="box"></div>
Code:
.box {
width: 100px;
height: 100px;
background-color: black;
transition: all 1s ease;
}

.box:hover {
width: 200px;
background-color: orange;
}
In diesem Beispiel wird sich die 100Px breite schwarze Box beim “hover” animiert sprich mit einem flüssigen Übergang zur einer 200Px breiten orangen Box verwandeln.

Optionen

Mit dem Wert “all” spreche ich alle Eigenschaften an die sich beim hovern des Elements verändern. Ich könnte auch “background-color” als Wert nehmen und somit nur die Hintergrundfarbe flüssig/animiert ändern lassen. Mit dem Wert “1s” sage ich schlicht wie lange der Übergang dauern soll. Der letzte Wert “ease” sagt mit welcher Geschwindigkeit bzw. mit welchem Animations Still der Übergang passiert. Es gibt verschiedene Geschwindigkeiten die man brauchen kann.

Geschwindigkeiten bzw. Stille
  • ease (Start : langsam Mitte: schnell Ende: langsam)
  • ease-in (Start: langsam)
  • ease-out (Ende: langsam)
  • ease-in-out ( Start & ende: langsam )
  • linear ( Start – ende: gleiche Geschwindigkeit )

Keyframe Animation

Diese neue Eigenschaft macht es uns möglich Elemente ohne Javascript zu animieren. Jedoch muss man beachten welche Browser und Browser-Versionen diese Eigenschaft unterstützt.

Beispiel

HTML Code:
<div class="box"></div>
Code:
.box {
width: 100px;
height: 100px;
background-color: black;
position: relative;
animation:myani 10s ease;
}

   [MENTION=1053529]keyframe[/MENTION]s myani
{
0% {background: red; left:0px; top:0px;}
25% {background: orange; right:0px; top:0px;}
50% {background: black; left:200px; top:500px;}
75% {background: yellow; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
Dieses Beispiel animiert eine Box in verschiedene Richtungen und wechselt gleichzeitig seine Farbe.

Optionen

In der Eigenschaft “animation” gebe ich die Grundinformationen der Animation an, wie Beispielsweise der erste Wert “myani”. Der erste Wert “myani” ist der Animationsname. Der zweite Wert “10s” sagt wie lange die Animation dauern soll. Der dritte Wert sagt wieder mit welcher Geschwindigkeit die Animation passiert. Die Geschwindigkeiten sind die selben wie im ersten Beispiel. Siehe Transitions.

Keyframes

In der Eigenschaft Keyframes hält man die Navigation der Animation fest. Als erstens sagt man für welche Animation die Keyframes gelten sollen. Das macht man indem man neben der Eigenschaft [B @s[/B] den Animationsnamen angibt den man in der Eigenschaft Animation angegeben hat. Nun gibt es zwei verschiedene Arten Keyframes festzuhalten. In meinem Beispiel habe ich die Art gebraucht, wo man sagt wen du 25% der Animation erreicht hast mach das und dies. Die Zahlen können beliebig ersetzt werden. Man beachte 0 ist der Start und 100 das Ende. Die zweite Möglichkeit wäre:

Code:
  [MENTION=1053529]keyframe[/MENTION]s myani
{
from{background-color:red;}
to{background-color: yellow;}
}
Man sagt einfach du sollst von der einen Eigenschaft zur anderen Animieren. Mit einer guten Idee kann man sehr markante Animationen kreieren.

Weitere Animation properties/werte
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-play-state


Box Shadow

Box Shadow einer der besten Eigenschaften die CSS3 mit bringt. Man kann mit nur einer Zeile Code coolen Schatten für boxen generieren lassen.

Beispiel

HTML Code:
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
Code:
.box1{
width: 100px;
    height: 100px;
    background-color: black;
    margin: 100px;
    float:left;
    box-shadow: -1px 2px 22px 0px rgba(50, 50, 50, 0.58);
}
.box2{
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 100px;
    float:left;
    box-shadow: -29px 44px 22px 0px rgba(50, 50, 50, 0.58);
}
.box3{
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 100px;
    float:left;
    box-shadow: 7px -10px 30px 0px rgba(50, 201, 201, 0.5);
}
.box4{
    width: 100px;
    height: 100px;
    background-color: black;
    margin: 100px;
    float:left;
    box-shadow: -71px -25px 30px 0px rgba(254, 201, 201, 1);
}
Optionen

Wie man im Ergebnis sieht, kann man mit einer Zeile Code coolen Schatten generieren lassen.

Den ersten Wert den man angibt ist die X-Achse Position des Schattens. Der zweite Wert die Y-Achse. Mit dem dritten Wert sagt man wie stark der Blur sein soll. Und als letztes gibt man noch die Farbe des Schattens an.

Border Radius

Mit dieser Eigenschaft können wir abgerundete Ecken erstellen. Es ist nun eifach ganze Kreise mit CSS zu machen. Da man früher mit Bilder schaffen musste um kreise zu generieren erspart diese Eigenschaft einem die ganze Arbeit.

Beispiel

HTML Code:
<div class="box"></div>
<div class="box-two"></div>
<div class="box-three"></div>
Code:
.box {
   width: 100px;
   height: 100px;
   background-color: black;
   border-radius: 10px;
}
.box-two {
   width: 100px;
   height: 100px;
   background-color: black;
   border-radius: 30px;
}
.box-three {
   width: 100px;
   height: 100px;
   background-color: black;
   border-radius: 90px;
}
Optionen

Als Wert gibt man einfach die grösse an, die man abgerundet haben möchte.

Abschluss

Ich hoffe ich konnte euch mit diesem Post einen kleinen Einblick gewähren. Am besten kopiert ihr meine Beispiele und versucht eigene Sachen zu kreieren.

Falls ihr Fragen oder Anregungen habt stehe ich gerne zur verfügung.

Weitere Tutorials

Ich habe nicht all zu lange her ein Tutorial über Web - Storage gemacht. Falls du dich interessierst, schaue einfach in dieser Sektion nach meinem Namen und du wirst schnell fündig.

Lehrreiche Grüsse

samkeez



samkeezz is offline  
Thanks
3 Users
Reply

Tags
animationen, css, css3, html css



« [AutoIt] ImageSearch | Bot Programmierkurs by NetMax »

Similar Threads
[Buying] Video Transitions [Video, After Effects]
12/10/2013 - elite*gold Trading - 0 Replies
Hellouw Zusammen, ich bin auf der Suche nach ein paar VideoTransitions. Aehnlich diesem Produkt hier: Color Transitions - Drag and Drop Video Transitions for Editors Das entspricht schon ziemlich genau dem, was ich suche. Besonderes Interesse hat die Blende bei 0:40 im Video geweckt. YouTUBE] Bevor ich mir nun aber dieses Paket kaufe, aus dem ich eigentlich nur eine Blende verwenden wuerde und die restlichen 99 nur 'rumliegen', wollte ich einfach mal fragen, ob zufaellig jemand sowas...
[S]uche jemand der mir erklärt was erklärt [B] 26 e*gold
08/31/2012 - elite*gold Trading - 0 Replies
Ok es geht um einen Bot welchen ich auf einer englishcen seite gefunden habe, den ich aber nicht aktivieren kann, weil mir das knowhow dazu fehlt. es ist ein youtubeviewbot welcher zum starten eine .bat Datei benötigt, welche man aber erst noch anpassen muss. per PN wäre das erklären zu aufwendig deshalb über skype: hell_i3oy
Hilfe SonyVegas Keyframe leiste weg
10/22/2010 - Video Art - 0 Replies
Hey leute, bin grad nen intro am machen, den effekt mit dem blitz eingefügt, wollte nen keyframe machen aber die leiste war aufeinmal weg .. Alle anderen Eintellungen kann ich noch ändern nur halt die zeitleiste ist weg. Fettes THX an denjenigen, der helfen kann ! Danke im Voruas
[Frage]Muss jeder scheiß released werden der teilweise euch sogar jemand erklärt hat?
12/31/2009 - S4 League - 12 Replies
Ja ich will das echtmal hier in den Raumstellen Teilweise haben Leute es jemanden erklärt zack release aus reiner THX geilheit ohne nachzudenken. Warum muss denn jeder scheiß der mit dem Resstool funkt jetz hier von irgendein random 08 15 leecher released werden. Ihr denkt echt nie nach. WER DAS RESSTOOL HAT UND DAMIT SELBER NICHTS ZUSTANDE BEKOMMT SOLLTE ES NICHT HABEN DAHER SIND SOLCHE RELEASE AUCH REINE THX GEILHEIT. Aber denkt mal nach einer der sowas kann erklärt es auchmal...



All times are GMT +1. The time now is 08:23.


Powered by vBulletin®
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2011, Crawlability, Inc.

Support | Contact Us | FAQ | Advertising | Privacy Policy | Abuse
Copyright ©2018 elitepvpers All Rights Reserved.