CSS-animasjoner

class: center, middle

# Glidende overganger og animasjoner med CSS3

???
Hvorfor CSS-animasjoner? Hardware-akselerert, bred støtte og hakker mindre enn jQuery sine animasjoner.
---

#Sjekk browser-kompatibilitet!

http://caniuse.com

???

Både transitions of animations har nå bred støtte. Kan hende at du må bruke -webkit-

---

# Animere mellom to tilstander
<table>
	<tr>
		<td style="width: 200px"><div class="box hover-width red"></div></td>
		<td>ingen glidende overgang</td>
	</tr>
	<tr>
		<td style="width: 200px"><div class="box hover-width red transition"></div></td>
		<td>transition: width 0.5s;</td>
	</tr>
</table>

???
Transition gjør slik at hvis det oppstår en endring i en attributt så animeres denne attributten i stedet for å gi en momentant endring.
Endring i en attributt kan skje hvis man legger på en klasse eller endrer en attributt ved hjelp av jQuery eller hvis man har definert en egen stil for hover eller focus eller noe sånt i css.

---

```html
<div class="red-box"></div>
```

```css
.red-box {
	width: 100px;
	height: 100px;
	background-color: red;
	transition: width 0.5s;
}

.red-box:hover {
	width: 150px;
}
```
<div class="box red hover-width transition"></div>
???
Legg merke til at transition må være satt mens endringen i bredden skjer for at det skal bli en glidende overgang. Altså ikke flytt transition til hover.
---

#Transition

* property
* duration
* timing-function
* delay

Eksempel:
transition: height 2s linear 0.5s;

???
Property: typiske ting som kan animeres er størrelse, posisjon, farge, rotasjon og sånn. Nevn at property kan være all.
Timing function betyr hvordan overgangen animeres, f.eks fort i starten og tregere mot slutten, eller f.eks lineært (altså like fort hele tiden).
Demonstrer timing-function her: http://css3.bradshawenterprises.com/transitions/
---

#Oppgave
Lag dette:
<div class="example-wrapper">
	<input class="my-input" placeholder="Søk" />
</div>

<span style="font-family: 'Arial';">
[cssdesk.com/UgPLV](http://cssdesk.com/UgPLV)
</span>
???
Gå inn på siden og vis hvordan man starter
---

#Transform

<table>
	<tr>
		<td><div class="box smaller hover-rotate red transition"></div></td>
		<td>transform: rotate(15deg);</td>
	</tr>
	<tr>
		<td><div class="box smaller hover-skew red transition"></div></td>
		<td>transform: skew(15deg);</td>
	</tr>
	<tr>
		<td><div class="box smaller hover-scale red transition"></div></td>
		<td>transform: scale(1.3, 0.7);</td>
	</tr>
	<tr>
		<td><div class="box smaller hover-translate red transition"></div></td>
		<td>transform: translate(-15px, 20px);</td>
	</tr>
</table>

???

Nevn at hvis man skal bruke transform må man ha med -webkit i tillegg

---

#3D transform
<div class="iphone-container">
	<div class="iphone-front"></div>
	<div class="iphone-back"></div>
</div>

???
Jeg går ikke inn på koden her, men dere skal iallfall vite at dette er mulig med dagens css.

---

#CSS3-animasjoner

"Flere glidende overganger etter hverandre"

???
Keyframes
Animasjoner kan repeteres, spilles baklengs etc.

---

#Eksempel:
<span style="font-size: 0.8em">
[subcide.com/experiments/fail-whale](http://www.subcide.com/experiments/fail-whale/)
</span>

---

```html
<div class="red-yellow-box"></div>
```

```css
.red-yellow-box {
	width: 100px;
	height: 100px;
	animation: my-animation 2s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes my-animation
{
	from {background-color: red;}
	to {background-color: yellow;}
}
```

---
```html
<div class="colorful-box"></div>
```

```css
.colorful-box {
	width: 100px;
	height: 100px;
	animation: colorful-animation 4s;
	animation-direction: alternate;
	animation-iteration-count: infinite;
}

@keyframes colorful-animation
{
	0%   {background-color: red;}
	25%  {background-color: yellow;}
	50%  {background-color: orange;}
	100% {background-color: green;}
}

```

---

#Oppgave
Lag dette (eller noe lignende):
<div class="example-wrapper" style="height: 200px;">
	<div class="my-final-box"></div>
</div>

<span style="font-family: 'Arial';">
[cssdesk.com/4PHJp](http://cssdesk.com/4PHJp)
</span>
???
Nevn dette med -webkit-
---