Tipps zur Webentwicklung (with comments)
https://julianehuber.blogger.de/
Blogger.de
jules87
2011-05-20T09:36:57Z
en
hourly
1
2000-01-01T00:00:00Z
-
CSS3 Animation Animation
https://julianehuber.blogger.de/stories/1827160/
Bei einer Animation mittels CSS3 ist es möglich die volle Kontrolle über die Animation zu haben, welches jedoch auch mit einem Mehraufwand verbunden ist.
Für die Realisierung werden Keyframes festgelegt in welcher wiederum Transitions angelegt werden.
@keyframes "Test" {
0% { right:100px; }
50% { right: 75px; }
100% { right:150px; }
}
In dieser Animation "Test" wird am Anfang die Animation right auf 100px gesetzt. Nach 50% der Animationszeit...
Blogger.de
jules87
CSS
Copyright © 2011 jules87
2011-05-20T09:36:57Z
-
CSS3 Animation Transformation
https://julianehuber.blogger.de/stories/1826801/
Kommen wir nun zur ersten Animationsmöglichkeit mithilfe von CSS3: der Transformation. Sie ist dafür gedacht Elemente frei in der Fläche verändern zu können. Mit der Notation "transform" können die Elemente beliebig gedreht, skaliert, verschoben oder gestaucht werden.
Die verschiedenen Transformationen werden nun näher erläutert:
transform: rotate(45deg);
Hier wird das Element im Uhrzeigersinn um 45° gedreht.
transform: scale(1.5);
Das Element wird auf...
Blogger.de
jules87
CSS
Copyright © 2011 jules87
2011-05-19T13:28:37Z
-
CSS3 Animation Transitions
https://julianehuber.blogger.de/stories/1827151/
Bei einer Transition können die Elemente, beispielsweise durch Hover, zwischen verschiedenen Zuständen wechseln.
Beispiel:
a {
background: #f00;
transition: background 1s linear;
}
a:hover {
background-color: #00f;
}
In diesem Beispiel wird die Hintergrundfarbe über 1 Sekunde linear angepasst. Dies bedeutet, dass nach einer halben Sekunde ein Lila als Übergangsfarbe zu sehen ist.
Um ein Element drehen zu können, kann man folgenden Code benutzen:
div...
Blogger.de
jules87
CSS
Copyright © 2011 jules87
2011-05-20T09:21:12Z
-
CSS3 Animation
https://julianehuber.blogger.de/stories/1826171/
Flash, Javascript und Co. bekommen Konkurrenz für die Animationsmöglichkeit in Webseiten. Mithilfe von CSS3 können Webentwickler nun Webseitenprojekte attraktiver machen. Der Vorteil gegenüber Flash - das HTML bleibt suchmaschinentauglich und barrierefrei.
Von nun an können Navigationsstrukturen von oben nach unten aufgeklappt werden ohne JavaScript dabei zu benutzen.
Momentan gibt es drei Spezifikationen für die Animationsvielfalt mit CSS3:
CSS 2D Transforms, CSS Transitions...
Blogger.de
jules87
CSS
Copyright © 2011 jules87
2011-05-17T23:55:04Z
-
Test
https://julianehuber.blogger.de/stories/1824855/
test...
Blogger.de
jules87
Copyright © 2011 jules87
2011-05-15T14:42:25Z
find
Search this site:
q
https://julianehuber.blogger.de/search