-
Notifications
You must be signed in to change notification settings - Fork 659
/
index.html
100 lines (87 loc) · 6.61 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Animatable: One property, two values, endless possibilities</title>
<link href="style.css" rel="stylesheet" />
<script src="https://leaverou.github.io/prefixfree/prefixfree.min.js"></script>
</head>
<body>
<hgroup>
<h1><a href="#">Animatable</a></h1>
<h2>One property, two values, endless possibilities</h2>
</hgroup>
<input type="radio" name="animate" id="on-hover" checked />
<label for="on-hover">Animate on hover</label>
<input type="radio" name="animate" id="all" />
<label for="all">Animate all</label>
<div role="main">
<a data-property="background-color" data-from="slategray" data-to="black"></a>
<a data-property="background-position" data-from="0 0" data-to="100% 100%" style="background-image: linear-gradient(135deg, transparent 25%, black 25%, black 50%, transparent 50%, transparent 75%, black 75%, black); background-size:50px 50px"></a>
<a data-property="background-position" data-from="3px 0, 3px 0, 15px -150px, 15px -150px" data-to="3px -70px, 3px -70px, 15px -80px, 15px -80px" style="background-color: #E04332; background-repeat: repeat-x; background-size: 24px 300px; background-image: linear-gradient(135deg, slategray 25%, transparent 25%), linear-gradient(45deg, transparent 75%, slategray 75%), linear-gradient(45deg, slategray 25%, transparent 25%), linear-gradient(135deg, transparent 75%, slategray 75%);" data-author="kizmarh"></a>
<a data-property="background-size" data-from="5px 5px" data-to="150px 150px" style="background-image: repeating-radial-gradient(transparent, transparent 9px, black 11px, black 20px); background-position:center"></a>
<a data-property="border-radius" data-from="0" data-to="50%"></a>
<a data-property="border-radius" data-from="0 100%" data-to="100% 0"></a>
<a data-property="border-width" data-from="0" data-to="75px" style="border-style:solid; border-color: black;"></a>
<a data-property="border-width" data-from="0" data-to="35px" style="border-style:dashed; border-color: black;"></a>
<a data-property="border-width" data-from="0" data-to="75px" style="border-style:double; border-color: black;"></a>
<a data-property="box-shadow" data-from="0 0 black" data-to="0 150px 10px -50px rgba(0,0,0,.5)"></a>
<a data-property="box-shadow" data-from="none" data-to="inset -75px -75px 400px #000" data-author="yuritkachenko"></a>
<a data-property="box-shadow" data-from="inset 0 0 75px 75px slategray, 0 0 0 slategray" data-to="inset 0 0 35px 35px transparent, 0 0 75px 50px transparent" style="background: transparent; border-radius: 1px;" data-author="kizmarh"></a>
<a data-property="color" data-from="white" data-to="black"></a>
<a data-property="font-size" data-from="60px" data-to="300px"></a>
<a data-property="height" data-from="150px" data-to="0"></a>
<a data-property="letter-spacing" data-from="0" data-to="100px"></a>
<a data-property="line-height" data-from="10px" data-to="300px"></a>
<a data-property="opacity" data-from="1" data-to="0"></a>
<a data-property="outline-width" data-from="0" data-to="100px" style="outline-color:black; outline-style: solid;"></a>
<a data-property="outline-offset" data-from="-5px" data-to="30px" style="outline-style: dashed; outline-color:slategray;" data-author="mkuehnel"></a>
<a data-property="outline-color" data-from="transparent" data-to="red" style="outline-width: 30px; outline-style: solid;" data-author="mkuehnel"></a>
<a data-property="padding" data-from="0" data-to="50px 200px 50px 50px" data-author="steno"></a>
<a data-property="text-indent" data-from="0" data-to="100px"></a>
<a data-property="text-shadow" data-from="0 0 black" data-to="20px 20px 10px rgba(0,0,0,.5)"></a>
<a data-property="text-shadow" data-from="0 0 0 white" data-to="0 0 10px white" style="color: transparent;" data-author="bartaz"></a>
<a data-property="text-shadow" data-from="0 0 white" data-to="0 0 rgba(255,255,255,0), -45px -45px 0 red, -30px -30px 0 orange, -15px -15px 0 yellow, 0 0 0 green, 15px 15px 0 blue, 30px 30px 0 indigo, 45px 45px 0 violet" style="color: transparent" data-author="kizmarh"></a>
<a data-property="top" data-from="0" data-to="100px" style="position:relative"></a>
<a data-property="transform" data-from="rotate(0deg)" data-to="rotate(360deg)"></a>
<a data-property="transform" data-from="scale(1)" data-to="scale(2)"></a>
<a data-property="transform" data-from="skewX(0deg)" data-to="skewX(180deg)"></a>
<a data-property="transform" data-from="rotate(0deg) scale(1)" data-to="rotate(360deg) scale(0)"></a>
<a data-property="transform" data-from="perspective(400px) rotateY(0deg)" data-to="perspective(400px) rotateY(360deg)"></a>
<a data-property="transform" data-from="perspective(400px) rotateX(0deg)" data-to="perspective(400px) rotateX(360deg)" data-author="calvein"></a>
<a data-property="transform" data-from="perspective(400px) rotateY(0deg)" data-to="perspective(400px) translateZ(150px) rotateY(180deg)" data-author="bartaz"></a>
<a data-property="transform" data-from="perspective(400px) translate3d(0,0,0) rotateX(0) rotateY(0) rotateZ(0)" data-to="perspective(400px) translate3d(0,0,-5000px) rotateX(720deg) rotateY(360deg) rotateZ(-360deg)" data-author="bartaz"></a>
<a data-property="transform" data-from="perspective(400px) rotate3d(1,1,0,0deg)" data-to="perspective(400px) rotate3d(1,1,0,180deg)" data-author="bartaz"></a>
<a data-property="transform" data-from="perspective(400px) rotate3d(0,1,0,0deg)" data-to="perspective(400px) rotate3d(0,1,0,-180deg)" data-author="filipearaujo" style="transform-origin: 100% 50%;"></a>
<a data-property="transform-origin" data-from="50% 50%" data-to="0 100%" style="transform:rotate(45deg)"></a>
<a data-property="width" data-from="150px" data-to="330px" data-author="mkuehnel"></a>
</div>
<section id="info">
<h1>box-shadow</h1>
<a href="#" title="Previous">◀</a>
<a href="#" title="Next">▶</a>
<dl>
<dt>From:</dt>
<dd>0 0 black</dd>
<dt>To:</dt>
<dd>0 150px 10px -50px rgba(0,0,0,.5)</dd>
<dt>Author:</dt>
<dd>@leaverou</dd>
</dl>
</section>
<footer>Made by <a href="https://lea.verou.me">Lea Verou</a> with care</footer>
<script src="index.js"></script>
<a href="https://github.com/leaverou/animatable" target="_blank" class="github-ribbon">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="LeaVerou">Tweet</a>
<script src="https://platform.twitter.com/widgets.js"></script>
<script src="https://www.google-analytics.com/ga.js"></script>
<script>
try {
var pageTracker = _gat._getTracker("UA-597483-5");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>