animation-example/index.html at gh-pages · FEND16/animation-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Animationes</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>
	<div class="slideleft">
		<p>Make this div move off screen to the left with transform and transition</p>
	</div>
	<div class="rotate">
		<p>Make this div rotate 180 degrees to the left with transform and with a transition of 2 seconds</p>
	</div>
	<div class="skew">
		<p>Make this div skew by 30deg on the x-axis and 10deg on the y axis</p>
	</div>
	<div class="skew2">
		<p>Wooah, make this div rotate by 180deg on only the x-axis</p>
	</div>

	<div class="rotate">
		<p>Make this div rotate without perspective</p>
	</div>
	<div class="translate">
		<p>Make this div translate to the left and down by 2px on the x-axis and 2px on the y-axis</p>
	</div>
	<div class="scaleandrotate">
		<p>Make this div scale by 1.1 and rotate on the Z-axis by 10 deg</p>
	</div>
	<div class="timing">
		<p>Make this div translate by 10px and change background color. But the background must transition faster or slower than the translate.</p>
	</div>

	<section class="perspective-wrapper">
		<div class="rotate-perspective">Make me rotate 180deg on the Y-axis</div>
		<div class="skew-perspective">Make me skew 180 deg</div>
		<div class="custom-anim">Wahhooo</div>
		<div class="custom-anim">Wippidoo</div>
	</div>

</body>
</html>