Logo animeren - für Anfänger

sabrina79 · #1 (**permalink**) 03.06.2018, 21:30

Hallo

Habe noch sehr wenig Ahnung von HTML und CSS und möchte auf einer responsive Website ein Logo animieren. ( Möglichst einfach !)
Das Logo soll sich entweder irgendwie wellenartig bewegen, drehen oder ähnlich Aufmerksamkeit auf sich ziehen.

Kann mir jemand helfen welche tags ich in HTML und/oder CSS an welcher Stelle einfügen muss?

Vielen lieben Dank schonmal

protonenbeschleuniger · #2 (**permalink**) 04.06.2018, 07:42

Da musste du schon ein bischen Informationen sammeln, es gibt dutzende Möglichkeiten von Animationen und so allgemein wie du es beschreibst, läßt sich so eine Frage nicht beantworten.

Zumal du in der Javascript Abteilung die Frage stellst, aber in deiner Frage davon nicht die Rede ist, damit schaffst du noch mehr Verwirrung.

Ich kann dir ein paar Seiten zeigen, wo erklärt wird wie man CSS Animationen erstellt. Diese finden sich aber auch leicht mit einer Suchmaschine. Besser wäre es, wenn du uns zeigst was du schon versucht hast damit wir dir daran zeigen können ob und was du falsch machst. Oder, du musst deutlich konkreter werden welche Art von Animation du dir vorstellst. Es wäre aber auch da sinnvoll, wenn du erst mal dir ein paar Beispiele im Internet anschaust, da dort die Technik wesentlich besser erklärt wird, als wir das hier können. Wir können dir aber dann gut helfen, wenn du irgendwelche konkrete Probleme beim umsetzen hast.

sabrina79 · #3 (**permalink**) 04.06.2018, 19:22

habe mir so etwas vorgestellt wie die Buttons ( Printdesign, Corporate Design, Webdesign) auf dieser Seite:

https://www.kraehativ-design.de/#leistungen

Die hüpfen oder bewegen sich etwas wenn man mit der Maus draufgeht.
Habe meine Frage im Javaforum gestellt, da ich dachte für so etwas wäre Javascript nötig

Soll ich den HTML und CSS Code für die Seite auf der das Logo animiert werden soll mal mit hochladen?

protonenbeschleuniger · #4 (**permalink**) 04.06.2018, 21:01

Zitat:

Zitat von sabrina79

habe mir so etwas vorgestellt wie die Buttons ( Printdesign, Corporate Design, Webdesign) auf dieser Seite:

https://www.kraehativ-design.de/#leistungen

Die Animation ist mit CSS, wird aber mit Javascript gestartet, was nicht notwendig wäre.

Zitat:

Zitat von sabrina79

Soll ich den HTML und CSS Code für die Seite auf der das Logo animiert werden soll mal mit hochladen?

Nee, so geht das nicht. Wenn du rausgefunden hast, was du willst musst du versuchen es umzusetzen und wenn du Fragen hast helfen wir dir weiter. Aber eine "Auftragsarbeit" kannst du hier nicht erwarten.

Ich habe aber mal den Code der Animation des Kreises aus der Seite kopiert (weil es mich auch interessiert, ich habe noch nicht soviel mit keyframes gemacht):

HTML-Code:

<style type="text/css">
@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(.95, 1.05, 1);
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, .95, 1);
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.cv-icon-container:hover {
  animation-name: rubberBand;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.cv-icon-container {
    background-color: #F3F3F3;
    position: relative;
    margin: 0px auto 30px;
    text-align: center;
    border-radius: 100%;
    width: 120px;
    height: 120px;
}
</style>

<div class="cv-icon-container"></div>

Weiter Infos dazu findest du z.b. hier

https://www.mediaevent.de/css/animation.html
https://wiki.selfhtml.org/wiki/CSS/E...tion/animation

sabrina79 · #5 (**permalink**) 04.06.2018, 21:11

Ok... vielen Dank. Werde mich da mal umsehen.
Blicke da momentan noch überhaupt nicht durch.

protonenbeschleuniger · #6 (**permalink**) 04.06.2018, 21:26

Ehrlich gesagt ist das auch nciht ganz einfach. Ich hab das jetzt auch nur kopiert und grundsätzlich gehört da auch noch ein bisschen Wissen über diverse Dinge dazu. Neben HTML und CSS (Fortgeschritten), muss man auch Wissen wie Animation aufgebaut sind, z.b. was eine transition ist (https://wiki.selfhtml.org/wiki/CSS/E...ion/transition)

Wobei in dem Fall eine etwas komplexere CSS Eigenschaft wirkt (https://wiki.selfhtml.org/wiki/CSS/E...mationen/scale)

Der ganze Code kann auch noch gekürzt werden, hilft vielleicht für's Verständnis:

HTML-Code:

<style type="text/css">
@keyframes rubberBand {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, .95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

.cv-icon-container:hover {
  animation-name: rubberBand;
  animation-duration: 1s;
  animation-fill-mode: both;
}

.cv-icon-container {
    background-color: #F3F3F3;
    position: relative;
    border-radius: 100%;
    width: 120px;
    height: 120px;
}
</style>

<div class="cv-icon-container"></div>

sabrina79 · #7 (**permalink**) 04.06.2018, 22:24

bringt ja auch nichts wenn ich das einfach reinkopiere und gar nicht verstehe was ich da tue !

Werde mich erst mal in die Grundlagen einarbeiten.
Vielen Dank für die links und die Mühe!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Logo rechts unten in Header (Header hat bg-img)	cordi	CSS	2	29.05.2017 14:21
Anfänger: Positionierung.	xam	CSS	3	19.05.2012 14:18
Boxen von Navigation und Logo sind zu weit auseinander	lila_3	CSS	2	03.09.2009 23:28
[print.css] Logo drucken auch bei deaktivierten Hintergrundbildern?	Rayne	CSS	5	01.11.2008 16:03
CSS Anfänger mit Anlaufschwierigkeiten mit Rahmen um 3 DIV's	NSprenger	CSS	15	22.12.2005 14:40