Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Animation und Positionierung mit CSS3

Some of the basics for CSS3's "transform," "transition," and "animation" properties.
by

Timo Grossenbacher

on 28 May 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Animation und Positionierung mit CSS3

CSS3 - Animations, Transformations & Transitions
Impuls Workshop, 28. Mai 2014
Erklärung einiger der CSS3-Attribute für Positionierung, Übergänge und Animationen, und
wie man Sie verwenden kann.
Wieso animieren?
Ein kleines Design-Extra ohne viel aufwand
Fordert den Benutzer zur Interaktion auf
Zeigt dem Benutzer an, dass Hinter den Kulissen etwas ausgeführt wird (wie z.B. Laden von Daten)
Eyecatcher, fördert User-Experience
CSS3-
Transform
: verschieben, drehen, skalieren und verzerren
Teil 1: transform
Objekt nach links, rechts, oben und unten verschieben
Translation
Syntax:
transform
:
translate
(
x
,
y
);

x
- Bewegung auf der X-Achse (negativ = nach links)
y
- Bewegung auf der Y-Achse (negativ = nach oben)
*
x
und
y
müssen CSS-Einheiten sein (px, pt, %)

Beispiel:
transform
:
translate
(
50px
,
50px
);
Erhöhen oder Verringern der Größe eines Objekts.
Scaling
Syntax:
transform
:
scale
(
x
,
y
);

x
- Horizontale Skalierung (width)
y
- Vertikale Skalierung (height)
x
and
y
sind keine CSS-Einheiten. Sie sind ein Verhältnis zur Originalgrösse. (1.0 = Originalgrösse, 2.0 = doppelte Grösse, etc.)

Beispiel:
transform
:
scale
(
2.0
,
1.0
);
transform
:
scale
(
-1.0
,
1.0
);
Dreht ein Objekt im Uhrzeigersinn.
Rotation
Syntax:
transform
:
rotate
(
theta
);

theta
- Drehwinkel
theta
muss eine CSS-Einheit sein (DEG für Grad, rad für Radiant)

Beispiel:
transform
:
rotate
(
180deg
);
transform
:
rotate
(
1.57rad
);
Objekte neigen, verzerren
Skew
Syntax:
transform
:
skew
(
theta
,
phi
)

theta
- neuer Winkel für die horizontale Achse
phi
- neue Winkel für die vertikale Achse
theta
und
phi
müssen CSS-Einheiten sein (deg oder rad)

Beispiel:
transform
:
skew
(
-30deg
,
0deg
);
Matrices use mathemetics to represent complicated transformations. All of the basic tranformations can be represented in a matrix.
Complicated: Matrices
Syntax:
transform
:
matrix
(
n1
,
n2
,
n3
,
n4
,
n5
,
n6
);

[
n1
,
n6
] represent a 3x2 matrix used to transform a point on the screen represented as [x,y,1]
In CSS3, matrices are too limited to be truly useful - this is really a parlour trick for math people.
Multiple transformations can be specified in one statement. They are applied in reverse order.
(The reason being mathematics gibberish having to do with matrices.)
Combining Transformations
Rotate by 30 degrees, then move to the right 50 pixels:
transform
:
translate
(
50px
,
0px
)
rotate
(
30deg
);

Move to the right by 50 pixels, then rotate 30 degrees:
transform
:
rotate
(
30deg
)
translate
(
50px
,
0px
);
Transitions übermitteln dem Browser, Stile allmählich statt sofort zu ändern.
Teil 2: Transitions
Hover-Aktivität ohne Transition
Unmittelbare Änderungen
a
.
menu-link
{
color
:
#3F3
;
}

a
.
menu-link
:
hover
{
color
:
#373
;
}
Transition Property (Eigenschaft)
Syntax:
transition
:
property-name

duration
timing-function
delay
;

property-name
: der Name der Eigenschaft, die Sie ändern wollen (height, color, etc ...)
duration
: wie lange es dauert um von einem Wert zum anderen zu wechseln
timing-function
: die Art/Verlauf, in der der Browser von einem Wert über zum anderen wechselt
delay
: wie lange der Browser vor dem Beginn der Übergangs warten soll

Beispiel:
transition
:
color
1s
ease-in-out
0s
;
Die vier Grund Zeit-Funktionen geben dem Browser an, wie von dem ersten Wert auf den zweiten Wert gewechselt wird.
Zeit-Funktionen
linear
: direkter Wechsel von einem Wert zum anderen
ease-in
: ruhiger Start, direkt am Ende
ease-out
: direkter Start, ruhig am Ende
ease-in-out
: ruhiger Start, ruhig am Ende
a
.
menu-link
{

color
:
#3F3
;

transition
:
color

1s

ease-in-out

0s
;
}

a
.
menu-link
:
hover
{

color
:
#373
;
}
Zusammengefügt
Ergebnis: der Text wird beim Mouseover langsam verdunkeln, dann sanft aufzuhellen beim Mouseout.
You can specify multiple transitions in one line, separated by commas.
Multiple Transitions
transition
:
color

1s
ease-in-out
0s
,
width
1s
ease-in-out
0s
;
If you put two transitions properties in your CSS, the second will override the first.
transition
:
color
1s
ease-in-out
0s
;
transition
:
width
1s
ease-in-out
0s
;
Wrong!
Bei einer Keyframe-Animation wie in CSS3 werden die Eigenschaften der Anfangs- und Endpunkte einer Animation gesetzt und die Frames (Frames sind Bilder) dazwischen berechnet der Browser. Diese Anfangs- und Endpunkte heißen Keyframes oder Schlüsselbilder.
Teil 3: Animations
Eine Animation hat beliebig viele Keyframes. Die Animation läuft von einem Keyframe zum nächsten, wie ein Film von einer Kameraeinstellung zur nächsten springt.
Keyframes definieren
Syntax:
@keyframes

animation-name
{

n
{
property-name
:
value
;}

n
{
property-name
:
value
;}
}

n
ist ein Prozentsatz.
0%
= Start,
100%
= Schluss
Nach dem Schlüsselwort @keyframes folgt der frei gewählte Name der Animation.
Animation hinzufügen
Syntax:
animation
:
animation-name

duration
timing-function
delay repeat
;

animation-name
: beliebiger Name der nach @keyframes definiert wurde
repeat
: Anzahl der Wiederholungen der Animation vor dem Anhalten (oder "infinite" für unendlich)
Zusammengefügt
@keyframes

pulse-color
{

0%
{
color
:
rgba
(
255
,
255
,
255
,
0.75
);}

50%
{
color
:
rgba
(
255
,
255
,
255
,
1.00
);}

100%
{
color
:
rgba
(
255
,
255
,
255
,
0.75
);}
}

.
pulsating-text
{

animation
:
pulse-color

2s
linear
0s infinite
;
}
Transformations Beispiele
http://goo.gl/FjF0nS
http://goo.gl/M0X1pz
http://goo.gl/bcfqG
Transformation Order Example
Beispiele Transitions
http://goo.gl/mWbGUw
Beispiele
http://goo.gl/LNqSu
http://goo.gl/zX85oB
http://goo.gl/cHnshh
Sometimes you may need your page to do something after an object finishes a transition. For example, you may want to remove an element after it finishes fading out.

To do this, listen for the "transitionend" event.
Part 4: JavaScript Event
element.addEventListener("transitionend", functionName, false);
Event Example
CSS:
div
.
my-holder
{

width
:
100px
;

transition
:
width

1s
ease-in-out
0s
;
}

JavaScript:
myDiv
.addEventListener(
"click"
, function (
e
) {

e
.target.style.setProperty(
"width"
,
"0px"
,
""
);
}, false);
myDiv
.addEventListener(
"transitionend"
, function (
e
) {
if (
e
.target.style.width==
"0px"
)

e
.target.parentNode.removeChild(
e
.target);
}, false);
Example Online
http://goo.gl/ErnBY
1
2
3
start
4
Praxisbeispiele
Fly-out-Menü: http://goo.gl/qU5mV
5
Auch wenn diese Eigenschaften Teil der offiziellen CSS3-Spezifikation sein sollten, interpretiert jeder Browser sie ein wenig anders.

Um CSS3-Animationen in Ihren Seiten zu verwenden, ist es notwendig, die verschiedenen Browser separat zu adressieren.
Teil 4: Cross-platform Issues
-moz prefix
Firefox
-webkit prefix
Webkit
-moz-transform
:
rotate
(
45deg
);
-moz-transition
:
-moz-transform

1s
ease-in-out
0s
;

@-moz-keyframes

my-animation-name
{

0%
{
color
:
black
;}

100%
{
color
:
white
;}
}
-moz-animation
:
my-animation-name

1s
ease-in-out
0s infinite
;

-webkit-transform
:
rotate
(
45deg
);
-webkit-transition
:
-webkit-transform

1s
ease-in-out
0s
;

@-webkit-keyframes

my-animation-name
{

0%
{
color
:
black
;}

100%
{
color
:
white
;}
}
-webkit-animation
:
my-animation-name

1s
ease-in-out
0s infinite
;
-o prefix
Opera
-o-transform
:
rotate
(
45deg
);
-o-transition
:
-o-transform

1s
ease-in-out
0s
;
-ms prefix / ie9+
Internet Explorer
-ms-transform
:
rotate
(
45deg
);
Etwa die Hälfte der Website-Benutzer surfen immer noch mit IE, wann ist es okay, CSS-Transitions oder Animations zu verwenden?
?
Animationen, die für die Funktionalität der Website nicht umbedingt erforderlich sind.
Simple Animationen
Das soeben gezeigte Fly-Out-Menü beispielsweise funktioniert immer noch einwandfrei in IE.

Es ist zwar nicht animiert, aber es hindert den Benutzer auch nicht daran, zum Inhalt zu gelangen.
Animationen, die ein wichtiger Bestandteil des Contents sind, und/oder einen Eyecatcher darstellen.
Wichtige Animationen
Wenn die Animation einen wichtigen Teil der User-Experience ausmacht, ist es immer noch am besten, ein JavaScript-basiertes Framework zu verwenden. Wie z.B. jQuery.
Fast alle Handy-Browser basieren auf Webkit, Firefox oder Opera. Auch, weil CSS-Animationen keine JavaScript-Interpreter benötigen, werden diese in der Regel laufen flüssiger als jQuery.
Mobile Websites
Webkit: iPhone, Android, BlackBerry, webOS, Maemo
Firefox: Android, Maemo
Opera: Android, iPhone, Nintendo 3DS
If you use JavaScript to trigger events at the end of a transition then you'll need an alternative for IE9 and lower.
Transition Events
function MyEventHandler(
e
) {

// use e.target, not this, for the thing that just finished transitioning
var
myObj
=
e
.target;
}
...
function Collapse(
obj
) {

obj
.style.height =
"0px;"
if (
IsIE
) {
// trigger the event manually
var
e
= {
"target"
:
obj
};
MyEventHandler(
e
);
}
}
Real-world example /
Shameless self-promotion:
http://montclair.edu/mobile
So würde der Code aussehen, wenn sich alle Browser and die Standards halten würden:
CSS3-Code wie er sein sollte
a
{

color
:
blue
;

transition
:
color
0.5s
ease-in-out
0s
;
}

a
:
hover
{

color
:
red
;
}
Der gleiche Code mit allen Browser-spezifischen Tags.
CSS3-Code in der Realität
a
{

color
:
blue
;

transition
:
color
1s
ease-in-out
0s
;

-o-transition
:
color
1s
ease-in-out
0s
;

-webkit-transition
:
color
1s
ease-in-out
0s
;

-moz-transition
:
color
1s
ease-in-out
0s
;
}

a
:
hover
{

color
:
red
;
}
end
Fragen?
Anmerkungen?
?
?
?
Button mit Zusatzinfos: http://goo.gl/NJFBen
Akkordion: http://goo.gl/k6qAX
Lightbox: http://goo.gl/5iqgx
Slider: http://goo.gl/ipw1Z
Tabs: http://goo.gl/Mf1nS
Hover Bubbles: http://goo.gl/hP680
Full transcript