-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
109 lines (109 loc) · 7.62 KB
/
index.html
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Animations</title>
<link href="https://fonts.googleapis.com/css?family=Puritan|Spicy+Rice" rel="stylesheet">
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<section>
<h1>2D Animations</h1>
<button class="animationButton1" type="button" name="button">Float Right</button>
<button class="animationButton2" type="button" name="button">Float Left</button>
<button class="animationButton3" type="button" name="button">Float Bottom</button>
<button class="animationButton4" type="button" name="button">Float Top</button>
<button class="animationButton5" type="button" name="button">Rotate Right</button>
<button class="animationButton6" type="button" name="button">Rotate Left</button>
<button class="animationButton7" type="button" name="button">Expand</button>
<button class="animationButton8" type="button" name="button">Shrink</button>
<button class="animationButton9" type="button" name="button">Pulse</button>
<button class="animationButton10" type="button" name="button">Push</button>
<button class="animationButton11" type="button" name="button">Pop</button>
<button class="animationButton12" type="button" name="button">Skew</button>
<button class="animationButton13" type="button" name="button">Skew Forward</button>
<button class="animationButton14" type="button" name="button">Skew Backward</button>
<button class="animationButton15" type="button" name="button">Skew Wobble</button>
<button class="animationButton16" type="button" name="button">Wobble Horizontal</button>
<button class="animationButton17" type="button" name="button">Wobble Vertical</button>
<button class="animationButton18" type="button" name="button">Wobble to Bottom Right</button>
<button class="animationButton19" type="button" name="button">Wobble to Top Right</button>
<button class="animationButton20" type="button" name="button">Wobble Top</button>
<button class="animationButton21" type="button" name="button">Wobble Bottom</button>
<button class="animationButton22" type="button" name="button">Shake</button>
<button class="animationButton23" type="button" name="button">Shake Out</button>
<button class="animationButton24" type="button" name="button">Bounce In</button>
<button class="animationButton25" type="button" name="button">Bounce Out</button>
<button class="animationButton26" type="button" name="button">Bob</button>
</section>
<section>
<h1>Background Transitions</h1>
<button class="button1" type="button" name="button">Transition Duration 0.3s</button>
<button class="button2" type="button" name="button">Transition Duration 1s</button>
<button class="button3" type="button" name="button">Transition Delay 0.5s</button>
<button class="button4" type="button" name="button">Multiple Transitions</button>
<button class="button5" type="button" name="button">Sweep to Right</button>
<button class="button6" type="button" name="button">Sweep to Left</button>
<button class="button7" type="button" name="button">Sweep to Bottom</button>
<button class="button8" type="button" name="button">Sweep to Top</button>
<button class="button9" type="button" name="button">Horizontal Outer Sweep</button>
<button class="button10" type="button" name="button">Horizontal Inner Sweep</button>
<button class="button11" type="button" name="button">Vertical Outer Sweep</button>
<button class="button12" type="button" name="button">Vertical Inner Sweep</button>
<button class="button13" type="button" name="button">Bounce to Right</button>
<button class="button14" type="button" name="button">Bounce to Left</button>
<button class="button15" type="button" name="button">Bounce to Bottom</button>
<button class="button16" type="button" name="button">Bounce to Top</button>
<button class="button17" type="button" name="button">Rectangle In</button>
<button class="button18" type="button" name="button">Rectangle Out</button>
<button class="button19" type="button" name="button">Radial In</button>
<button class="button20" type="button" name="button">Radial Out</button>
</section>
<section>
<h1>Border Transitions</h1>
<button class="borderButton1" type="button" name="button">Fade In</button>
<button class="borderButton2" type="button" name="button">Hollow Out</button>
<button class="borderButton3" type="button" name="button">Inset Border</button>
<button class="borderButton4" type="button" name="button">Outline Out</button>
<button class="borderButton5" type="button" name="button">Outline In</button>
<button class="borderButton6" type="button" name="button">Ripple Out</button>
<button class="borderButton7" type="button" name="button">Ripple In</button>
<button class="borderButton8" type="button" name="button">Underline from Left</button>
<button class="borderButton9" type="button" name="button">Underline from Right</button>
<button class="borderButton10" type="button" name="button">Underline from Center</button>
<button class="borderButton11" type="button" name="button">Overline from Left</button>
<button class="borderButton12" type="button" name="button">Overline from Right</button>
<button class="borderButton13" type="button" name="button">Round Corners</button>
<button class="borderButton14" type="button" name="button">Reveal</button>
<button class="borderButton15" type="button" name="button">Underline Reveal</button>
<button class="borderButton16" type="button" name="button">Overline Reveal</button>
</section>
<section>
<h1>Shadow Transitions</h1>
<button class="shadowButton1" type="button" name="button">Shadow Bottom</button>
<button class="shadowButton2" type="button" name="button">Shadow Sides</button>
<button class="shadowButton3" type="button" name="button">Grow Shadow</button>
<button class="shadowButton4" type="button" name="button">Float Shadow</button>
<button class="shadowButton5" type="button" name="button">Glow</button>
<button class="shadowButton6" type="button" name="button">Shadow Radial</button>
<button class="shadowButton7" type="button" name="button">Shadow Outset</button>
<button class="shadowButton8" type="button" name="button">Shadow Inset</button>
</section>
<section>
<h1>Special Effects</h1>
<button class="specialButton1" type="button" name="button">Curl Top Left</button>
<button class="specialButton2" type="button" name="button">Curl Top Right</button>
<button class="specialButton3" type="button" name="button">Curl Bottom Left</button>
<button class="specialButton4" type="button" name="button">Curl Bottom Right</button>
<button class="specialButton5" type="button" name="button">Bubble Top</button>
<button class="specialButton6" type="button" name="button">Bubble Right</button>
<button class="specialButton7" type="button" name="button">Bubble Bottom</button>
<button class="specialButton8" type="button" name="button">Bubble Left</button>
<button class="specialButton9" type="button" name="button">Bubble Float Top</button>
<button class="specialButton10" type="button" name="button">Bubble Float Right</button>
<button class="specialButton11" type="button" name="button">Bubble Float Bottom</button>
<button class="specialButton12" type="button" name="button">Bubble Float Left</button>
</section>
</body>
</html>