Skip to content

Commit 0dc510a

Browse files
author
Arné Schreuder
committed
Added array-like notation to the way properties of keys in a keyframe are specified. Updated the README to relect these changes. All the examples also relect these changes. Added a minify.sh shell script to automate the minifying process.
Signed-off-by: Arné Schreuder <arn3@arn3.com>
1 parent 3bd838d commit 0dc510a

10 files changed

Lines changed: 351 additions & 205 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*~

‎README.md‎

Lines changed: 86 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -13,79 +13,133 @@ Requirements
1313
In order for jQuery.Keyframes to work the jQuery library needs to be linked either through CDN:
1414

1515
```html
16-
<script src="http://code.jquery.com/jquery-<version>[.min].js"></script>
16+
<script src='http://code.jquery.com/jquery-<version>[.min].js'></script>
1717
```
1818

1919
or local copy:
2020

2121
```html
22-
<script src="/path/to/jquery-<version>[.min].js"></script>
22+
<script src='/path/to/jquery-<version>[.min].js'></script>
2323
```
2424

2525
Installation
2626
------------
2727
Include script in the *head* of your document using the following line:
2828

2929
```html
30-
<script src="/path/to/jquery.keyframes[.min].js"></script>
30+
<script src='/path/to/jquery.keyframes[.min].js'></script>
3131
```
3232

3333
Usage
3434
-------------
3535

36-
Get browser style prefix
36+
**Get browser style prefix**
3737

3838
```javascript
39-
var browserCode = $.keyframe.vendorPrefix();
39+
var vendorPrefix = $.keyframe.getVendorPrefix();
4040
```
4141

42-
Detecting CSS animation support
42+
**Detecting CSS animation support**
4343

4444
```javascript
4545
var supportedFlag = $.keyframe.isSupported();
4646
```
4747

48-
Adding a new animation sequence (keyframe)
48+
**Adding a new animation sequence (keyframe)**
4949

5050
```javascript
5151
$.keyframe.define([{
52-
name: "trapdoor-sequence",
53-
"0%": "height:70px",
54-
"30%": "height:10px",
55-
"60%": "height:30px",
56-
"100%": "height:10px"
52+
name: 'trapdoor-sequence',
53+
'0%': {'height': '70px'},
54+
'30%': {'height': '10px'},
55+
'60%': {'height': '30px'},
56+
'100%': {'height': '10px'}
5757
}]);
5858
```
5959

60-
Adding a single frame style
60+
**Adding a single frame style**
6161

6262
```javascript
63-
var bcode = $.keyframe.vendorPrefix();
6463
$.keyframe.define({
65-
name: "ball-roll",
66-
from: bcode + "transform:rotate(0deg)",
67-
to: bcode + "transform:rotate(360deg)"
64+
name: 'ball-roll',
65+
from: {
66+
transform: 'rotate(0deg)'
67+
},
68+
to: {
69+
transform: 'rotate(360deg)'
70+
}
6871
});
6972
```
7073

71-
Adding multiple frame styles
74+
**Adding multiple frame styles**
7275

7376
```javascript
74-
var bcode = $.keyframe.vendorPrefix();
77+
var pfx = $.keyframe.getVendorPrefix();
78+
79+
//Note the variable notation to be able to add vendor specific prefix
80+
var transform = pfx + 'transform';
81+
7582
$.keyframe.define([{
76-
name: "ball-roll",
77-
from: bcode + "transform:rotate(0deg)",
78-
to: bcode + "transform:rotate(360deg)"
79-
},
80-
{
81-
name: "half-rotation",
82-
from: bcode + "transform:rotate(0deg)",
83-
to: bcode + "transform:rotate(180deg)"
83+
name: 'roll-clockwise',
84+
'0%': {
85+
'margin-left' : '0px',
86+
'background-color' : 'red',
87+
transform : 'rotate(0deg)'
88+
},
89+
'100%': {
90+
'margin-left' : '600px',
91+
transform : 'rotate(360deg)'
92+
}
93+
},{
94+
name: 'roll-anti-clockwise',
95+
'0%': {
96+
'margin-left' : '0px',
97+
'background-color' : 'red',
98+
transform : 'rotate(0deg)'
99+
},
100+
'100%': {
101+
'margin-left' : '600px',
102+
transform : 'rotate(-360deg)'
103+
}
104+
}
105+
]);
106+
```
107+
108+
**Adding styles and properties in array fashion**
109+
110+
*Gives resemblance to CSS styling definitions*
111+
112+
```javascript
113+
var pfx = $.keyframe.getVendorPrefix();
114+
115+
//Note the variable notation to be able to add vendor specific prefix
116+
var transform = pfx + 'transform';
117+
118+
var shake_start = {transform: 'translate(0px)'};
119+
var shake_odd1 = {transform: 'translate(-10px, -10px)'};
120+
var shake_even1 = {transform: 'translate(10px, 10px)'};
121+
var shake_odd2 = {transform: 'translate(10px, -10px)'};
122+
var shake_even2 = {transform: 'translate(-10px, 10px)'};
123+
124+
$.keyframe.define([{
125+
name: 'crazy',
126+
'0%': shake_start,
127+
'10%': shake_odd2,
128+
'20%': shake_even1,
129+
'30%': shake_odd2,
130+
'40%': shake_even2,
131+
'50%': shake_odd2,
132+
'60%': shake_even1,
133+
'70%': shake_odd1,
134+
'80%': shake_even2,
135+
'90%': shake_odd1
84136
}
85137
]);
86138
```
87139

88-
Playing an animation
140+
*Please note, you can add as many properties to the array as you want to*
141+
142+
**Playing an animation**
89143

90144
```javascript
91145
$(selector).playKeyframe({
@@ -100,7 +154,7 @@ $(selector).playKeyframe({
100154
});
101155
```
102156

103-
Playing an animation (shorthand)
157+
**Playing an animation (shorthand)**
104158

105159
```javascript
106160
$(selector).playKeyframe(
@@ -109,19 +163,19 @@ $(selector).playKeyframe(
109163
);
110164
```
111165

112-
Reset the animation
166+
**Reset the animation**
113167

114168
```javascript
115169
$(selector).resetKeyframe(callback);
116170
```
117171

118-
Freeze keyframe animation and kill callbacks
172+
**Freeze keyframe animation and kill callbacks**
119173

120174
```javascript
121175
$(selector).pauseKeyframe();
122176
```
123177

124-
Resume keyframe animation
178+
**Resume keyframe animation**
125179

126180
```javascript
127181
$(selector).resumeKeyframe();

‎example/advanced/js/animation.js‎

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,40 @@
11
(function() {
2-
var bcode;
2+
var pfx = $.keyframe.getVendorPrefix();
3+
var transform = pfx + 'transform';
34

4-
bcode = $.keyframe.vendorPrefix();
5-
6-
$.keyframe.define([
7-
{
8-
name: "clouds",
9-
"from": "margin-left:-50%",
10-
"to": "margin-left:100%"
11-
}, {
12-
name: "balloon",
13-
"from": "margin-top:200px;margin-left:100%;" + bcode + "transform:scale(1)",
14-
"to": "margin-top:100px;margin-left:-20%;" + bcode + "transform:scale(0.3)"
15-
}, {
16-
name: "sun",
17-
"from": "margin-top:50px;margin-left:-20px;" + bcode + "transform:rotate(360deg)",
18-
"to": "margin-top:-20px;margin-left:100px;" + bcode + "transform:rotate(0deg)"
19-
}
20-
]);
5+
$.keyframe.define([{
6+
name: "clouds",
7+
"from": {
8+
"margin-left": "-50%"
9+
},
10+
"to": {
11+
"margin-left": "100%"
12+
}
13+
}, {
14+
name: "balloon",
15+
"from": {
16+
"margin-top": "200px",
17+
"margin-left": "100%",
18+
transform: "transform:scale(1)"
19+
},
20+
"to": {
21+
"margin-top": "100px",
22+
"margin-left": "-20%",
23+
transform: "transform:scale(0.3)"
24+
}
25+
}, {
26+
name: "sun",
27+
"from": {
28+
"margin-top": "50px",
29+
"margin-left": "-20px",
30+
transform: "transform:rotate(360deg)"
31+
},
32+
"to": {
33+
"margin-top": "-20px",
34+
"margin-left": "100px",
35+
transform: "transform:rotate(0deg)"
36+
}
37+
}
38+
]);
2139

2240
}).call(this);

‎example/advanced/js/animation.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/advanced/js/min/animation.min.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)