😳 7 CSS Animationen in je ⏱ einer Minute! 👍 [TUTORIAL]

Du brauchst einen Hoster?
🧡 bit.ly/mein-ho...
Fragen oder Probleme? Werde Teil der Community! (Kostenlos)
📣 Discord Server: / discord
Unterstütze den Channel:
🧡 Adobe Creative Cloud: prf.hn/l/QxRnVXD (Affiliate Link)
🧡 Meine UI Design Tool: prf.hn/l/pmZdNJ9 (Affiliate Link)
🧡 Musik die ich Nutze: bit.ly/MeineHin... (Affiliate Link)
🧡 Mein Geschäftskonto: bit.ly/MeinFree... (Affiliate Link)
🧡 Meine Buchhaltungssoftware: bit.ly/sevDeskU... (Affiliate Link)
🧡 Meine Hardware/Kamerausrüstung: amzn.to/2ccEY0l (Affiliate Link)
🧡 KZbin Mitgliedschaft: bit.ly/KZbinS... (Affiliate Link)
Links aus dem Video:
► Live Demo: bit.ly/7Animati...
► IDE Tutorial: bit.ly/WebDesig...
Meine Social Media Seiten:
► Homepage: bit.ly/1y4rvIA
► Facebook: on. 11N25Ve
► KZbin: bit.ly/1rPBJ9Y
► Twitter: bit.ly/1y4rMeD
► Instagram: bit.ly/1UjBLuD
► Twitch: bit.ly/29VyA7J
► Discord: / discord
Wenn ihr euch für meine Ausrüstung, Software oder Bücher interessiert dann schaut einfach hier mal vorbei und unterstützt mich mit einem Kauf.
► Meine Ausrüstung(Affiliate Link): amzn.to/2ccEY0l
► Software(Affiliate Link): amzn.to/2c0Fc7r
► Bücher(Affiliate Link): amzn.to/2bTCfcU
#Tutorial #WebEntwicklung #WebDesign
Copyright by Johannes Schiel / Unleashed Design

[@PixelMediaArts]

Wie in der Mathe Vorlesung, Sekunde nicht hingeguckt direkt halbes Buch geschrieben.

[@UnleashedDesign]

xD das stimmt :D wobei es maximal eine Minute sein kann ;)

[@ademyaren25]

Habe mich die ganze Zeit gefragt wie das klappt ohne den geschweiften Klammern und den Semikolons bis ich gesehen habe dass es eine Sass Datei ist😂😂😂

[@exef1]

Der schummelt doch und lässt das video schneller laufen 😁

[@UnleashedDesign]

nope :D 1:1 original Speed :)

[@orlando6453]

nächstes mal den nervigen Uhrensound ausmachen

[@lalanini4486]

nächstes mal eine bessere Wortwahl wählen und sich auch mal bedanken👌🏻;)

[@aykutaskeri7895]

So ein Video ist für mich persönlich Gold wert 💙👏

[@UnleashedDesign]

Freut mich wenn dir das Video gefällt :D

[@alff3461]

Aber sowas von Gold 😊 Muss mir dann doch mal SASS ansehen 😅

[@korneliusoderso]

@@alff3461 sus

[@michalvonbargen6523]

Richtig toll gemacht und super einfach erklärt... vielen Dank :)

[@UnleashedDesign]

Freut mich wenn dir die Videos gefallen :)

[@SH-qz5oo]

nettes kleines video für anfänger :) ein kleiner hint: animation-direction: alternate;

[@justjocore]

Ich habe mal ne Frage: Was ist mit dem Semikolon hinter jeder Linie. Hast du das ausgeblendet?

[@UnleashedDesign]

Das ist in dem Video Sass kein reines CSS, das ist ein CSS Preprocessor :)

[@wernerw.1328]

Bei 68k Aufrufe nur 3k "Daumen hoch" ist schlichtweg eine Sauerei. Du versprichst etwas - du hältst es (du wirst niemals Politiker werden) und es sind Sachen, die jeder in einer Website realisieren kann und auch sollte.

[@herrschaufele7210]

Von solchen Animationen wünschte ich gäbe es eine ganze Kategorie auf deinem Chanel, sehr cool, Danke

[@UnleashedDesign]

Wird in Zukunft immer mal wieder kommen solche Videos :)

[@jojopde]

Also ich bin ein kompletter Anfänger und deshalb doppelt begeistert. Was ich aber nicht verstanden/gesehen habe ist, wie kommt main.sass in die index.html Über .element ??? Was ich aber schon wo anders gelernt habe ist das man nicht makieren einfügen machen muss, sondern ein CSS Short dafür machen kann. Zumindest in Visual Studio Code Habe dich als Lesezeichen abgespeichert und immer mal wieder reinschauen. Vielen Dank für deine Videos

[@gloop1984]

Kurzer Tipp den Script Tag kannst du in den Header packen und das Attribut „defer“ hinzufügen. Hat den selben Effekt wie am Ende

[@Biene_Maja]

Gut, das Video ist von 2019, jetzt haben wir 2023. Dennoch, der Code wie auch Codepen ist nicht verlinkt. Codepen habe ich selber aber den Code als Ganzes zu sehen, wäre auch nach dieser Zeit echt nice gewesen...

[@kaine2694]

die uhr ist sehr laut. sonst super

[@UnleashedDesign]

Ja das habe ich mir aufgeschreiben :P das nächste mal wird es die nicht mehr geben :D

[@myytkn8526]

Ich habe mein Job gemacht und gab für diese Video LIKE. Jetzt bist du dran und bring's mir bei.

[@heisterreinsch6251]

dictionary.cambridge.org/de/aussprache/englisch/hover viel erfolg! die tipps sonst super. like is raus, abo auch!

[@UnleashedDesign]

xD das ist der Grund warum meine VIdeos nicht in Englisch sind haha. Vielen Dank :)

[@xilonmidi767]

Great video but that clock ticking is so annoying.

[@roswithadusa8673]

hallo U..Bei timeline 3:25 weshalb wird hier ein & verwendet ? Würde es nicht ausreichen .effekt: anzugeben?

[@UnleashedDesign]

jein weil das & bedeutet wenn du Class A und Class B hast dann mach etwas ohne das & wäre es wenn Class B child von Class A ist mach etwas

[@Mikarevival]

wie ist .element::after .... &.effekt:hover...&::after in CSS??? ich habe mehrere Variante versucht, leider ohne Erfolg. Vielen Dank.

[@UnleashedDesign]

.element::after {} sollte funktionieren oder .element .effekt:hover {}

[@drachenbootfan]

@@UnleashedDesign .element.effekt:hover {}

[@alper2421]

Super. Video hab ich mir gleich gespeichert. Wird mir bestimmt mal behilflich sein

[@UnleashedDesign]

hehe freut mich wenn es dir gefällt :)

[@Egon3k]

to hover [/ˈhʌvər/] 😜

[@misterbywork]

genial :D

[@franzb1152]

Hallo, gibt es auch eine gute Möglichkeit die erstellen Elemente zu sortieren? Beispielsweise, wenn man vier solcher Divs mit unterschiedlichen H2 (Element, Text, Button, Container) hat und diese nach dem H2 alphabetisch sortieren möchte? Viele Grüße

[@Tobi806]

Wenn dann mit JS :) du könntest alle Elemente in einem Array haben und dieses Array dann nach dem innerhtml sortieren und darauf die Elemente nacheinander dem DOM hinzufügen.

[@Bridgeforluck]

Gibt es eine Möglichket , die " Swiggle " Animation dann auszuführen , wenn man auf den Button Clickt ? , Super Tutorial , Hab was neues gelernt ! 😄

[@UnleashedDesign]

na klar, du musst nur die Swiggle Animation auf eine CSS Class legen und diese Class bei einem Click auf den Button legen, dann mti einem setTimeout nach der Animation die Class wieder entfernen

[@Bridgeforluck]

@@UnleashedDesign Es hat Funktioniert ! , Danke ! 😄😄

[@veronikavaisdev]

wow! it was really very cool! Thanks!))

[@UnleashedDesign]

Thx, i hope you understand everything even when its in german :)

[@noax6152]

Du sagst css machst aber sass

[@bachleda6217]

Warum alles so schnell, gibt es dafür einen Grund?

[@UnleashedDesign]

Hallo, weil es in diesem Video der Catch war das es 7 Animationen in je 1 Minute sind :) andere Videos sind etwas langsamer

[@Jsmny44]

✅

[@exoplanetling]

Würde gerne per CSS eine Postkarte animieren. Also die soll sich per links-klick horizontal an der Mittelachse drehen und dann die Rückseite zeigen. Ist das möglich?!

[@jamshidpaykar1848]

hallo kannst du mir eine kurze video über css Twenty Seventeen Wordpress Hintergrundbild einfügen und Speichen usw machen besten dank du kannst auch mir per wahtapp video senden besten Dank für deine Bemühung

[@alejandragarciaaragon5861]

Gracias! Me sirvió mucho Danke, sehr gut erklärt!

[@venex2624]

Super qualitativer Kanal den du da betreibst. Werde mir deine Videos anschauen und das Wissen zu nutze machen. Danke für deine mühe LG

[@florinruedi9203]

Super Video 👍 Perfekt Kommentiere

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt :)

[@gerritweiermann79]

Dieser Struggle alles in einer Minute zu schaffen xD

[@UnleashedDesign]

jap :D du glaubst nicht wie viele Versuche ich brauchte :D

[@cornflakes1889]

Kurz. Knapp. Kompakt. Danke dir :)

[@UnleashedDesign]

Danke freut mich wenn es dir gefallen hat :)

[@melodymonisha7210]

Hi,

[@UnleashedDesign]

Hi

[@ch_ruda]

coole Sache, hab gleich mal ein Abo da gelassen

[@UnleashedDesign]

Danke freut mich wenn dir das Video gefallen hat :)

[@Maa3zclghlgg]

wofür wird das Code ( translate) benutzt?

[@ninnick-nick]

👌👍🏾 interessant!

[@UnleashedDesign]

Freut mich wenn es gefallen hat :)

[@JBe-tt2eb]

Gefällt mir sehr gut. Gut erklärt. Vielen Dank

[@rolandkloter8800]

das ist kein tutorial-----allenfalls ein Hopp Demo ...wo ist da ein lerneffect ???

[@UnleashedDesign]

Hmm, also finde eigentlich schon das man etwas lernt, es ist kein Absolute Basics Video da es nicht nur 1. Punkt hat, sondern mehr eine Inspiration für verschiedene kleine mini Effekte.

[@torikoshimabukuru3456]

Hi blöde frage: wueso hast du keine css datei sondern eine sass?

[@UnleashedDesign]

Weil SASS quasi nach einem Compiling zu einer css wird :) jedoch viele Vorteile beim Schreiben bietet wie das nutzen von Variablen, vererbung usw.

[@torikoshimabukuru3456]

@@UnleashedDesign ich hab die vorletzte und letzt animation nicht geschafft, weil ich nicht wusste, wie ich keyframes im detail schreiben soll :/

[@barneyharper8749]

die klickende uhr nervt mega!

[@yuzex2831]

warum gehen bei mir die farben nicht? also zb das $white usw funktioniert nicht?

[@UnleashedDesign]

Kann es sein das du die Farben nicht als dass Variable definiert hast ?

[@kaosaron]

Wo ist der Code man?

[@UnleashedDesign]

Ich würde sagen in der Beschreibung unter "Live Demo" ? ;)

[@respectthedripkaren4515]

Sehr sehr geile Animationen! Kann man echt super auf Buttons, Divs, Images etc. anwenden, mit was man ja eigentlich sehr oft interagiert!

[@UnleashedDesign]

Danke freut mich wenn dir das Video weiterhelfen konnte :)

[@jerry9548]

Sehr cooles Video. Vielen Dank :)

[@UnleashedDesign]

Danke, freut mich wenn es dir gefällt :)

[@Lyrik-Klinge]

Super erklärt, super Content!

[@UnleashedDesign]

Freut mich wenn es dir gefällt :)

[@7thlegion984]

Hammer Effekte...!

[@rebundorebundo4779]

SUPER DUPA MEGA NICEEEE > Wann kommt deine neue Seite endlich ? :(

[@UnleashedDesign]

Das dauert noch xD Inhalte fehlen :D

Moin, sehr cooles Video. Bei mir werden einige CSS Eigenschaften nicht Autovervollständigt. box-shadow z.B. fehlt da noch irgendein Plugin für VSC? LG Marco

[@UnleashedDesign]

Hmmm also ich hab eig nur ein SASS Plugin sonst nichts

@@UnleashedDesign war wohl ein Bug im VSCode. Nach einem Neustart ging alles wie gehabt. 😀

[@4lifeplayfulness232]

Hi

[@UnleashedDesign]

hi

[@4lifeplayfulness232]

@@UnleashedDesign bist du auch telefonisch erreichbar?

[@techwake360]

that was awesome brother . i like that

[@Lootziffer]

Sind das jez Effekte in sass oder css

[@Lootziffer]

Bzw kann ich die in ein css Script so schreiben?

[@UnleashedDesign]

Theoretisch ja, du müsstest entweder einen Formatter nutzen der dir aus sass einfach css generiert oder aber die fehlenden Zeichen manuell hinzufügen :)

[@Caineghis20]

super geil :D

[@CimesTwo]

Geil! 💪🏼

[@UnleashedDesign]

Freut mich wenn dir das Video gefällt :)

[@ultramoxx1148]

Nicee

[@michaelsadcenko5359]

Titel etwas falsch gewählt für Anfänger aber sonst super video👍🏼

[@svens3722]

inwiefern? Der Titel beschreibt perfekt das Video.

[@benjaminfrank4597]

Wie macht man dass es sich animiert bei mir springt es vom einen auf den anderen?

[@m.h6050]

mit animation und dann 0 % 25 50 75 100 % dann sollte es wesentlich smoother sein falls du überhaupt noch die frage hast

[@fullmoneymind8647]

Mega Video! Klasse kurz und Knapp

[@Georgeous42]

So witzig, wie du hover sagst^^

[@UnleashedDesign]

Ein Grund warum ich keine Videos auf Englisch mache xD

[@elias_ofh7710]

Wie kann man dieses Vorschaukästchen am rechten Rand einfügen?

[@UnleashedDesign]

Das ist einfach nur mein Browser den ich im Video abschneide :D also wirklich einfach nur ein 1:1 Browserfenster klein gezogen.

[@elias_ofh7710]

@@UnleashedDesign okay Dankeschön aber der Code funktioniert bei mir leider trotzdem nicht ☹️

[@mehmetdeniz7208]

Welchen Editor benutzt du?

[@UnleashedDesign]

Ich nutze VSC :)

[@exoplanetling]

Wieso benutzt du keine {, } und ; ? :o

[@maximilianmander2471]

Das ist kein css und auch kein scss. Das ist sass.

[@electrofaust2]

Richtig geiler Content

[@UnleashedDesign]

Danke freut mich wenn dir der Inhalt gefällt :)

[@TschenseSense]

endlich das was ich gesucht habe

[@UnleashedDesign]

Freut mich wenn dir da Video helfen konnte :)

[@michaelblechinger2240]

Sehr cool gemacht!!

[@UnleashedDesign]

Freut mich wenn es dir gefällt :)

[@mava8826]

Vielen Dank dafür

[@UnleashedDesign]

gerne :)

[@rubenbeck3464]

Top video, danke.

[@UnleashedDesign]

Danke, freut mich wenn dir das Video geholfen hat :)

[@paulkohler8919]

sehr sehr cool

[@UnleashedDesign]

Danke freut mich wenn es dir gefällt :D

[@creatorshorizon5125]

Cooles Video für Einsteiger 👌🏻 allerdings sollte das width oder das height Attribut niemals animiert werden, wenn es sich im allgemeinen um ein grösseres Projekt handelt. Das ist extrem schlecht für die Performance. Dann lieber dem Parent Element einen overflow: hidden geben und das ::after Element mit css „transform“ nach rechts bewegen.

[@VeneraNW]

Vielen Dank

[@UnleashedDesign]

Freut mich wenn es dir gefällt :)

[@headbangerslife6969]

Hammer Video!

[@UnleashedDesign]

Danke :)

[@jaspersieben7606]

Gutes Video!

[@UnleashedDesign]

danke :)

[@wivi4850]

Hammer! :D

[@UnleashedDesign]

Danke Freut mich wenn es dir gefällt :)

[@heynooYT]

8:13

[@UnleashedDesign]

??

[@devKazuto]

Ich bin immer noch kein Fan davon, die Schriftgröße beim body auf 10px zu setzen, da Browser nicht umsonst die Schriftgröße von 16px vorgeben und es nur verwirren würde, wenn etwas mit rem auf 32px gebracht werden soll, 2rem aber dann 20px sind. 16px sind einheitlich bei allen Browsern und dies zu überschreiben nur weil man dann einfacher "rechnen" kann ist für mich kein Vorteil sondern einfach Faulheit und kann unnötig für Verwirrung sorgen.

[@JanSeewald]

In Codepen funktioniert Codebeispiel 3 nicht, es verzieht die Seite nach unten links, nur noch das Wort ist da und die weiße Box weg.

[@lukas4817]

Habe bei der HTML und bei der Sass datei genau das wie du hast eingegeben, aber wen ich die seite lade passiert steht nur elements da, es kommt aber keine animation oder so

[@elias_ofh7710]

ist bei mir genau so