animation 0.1.alpha.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mdown +6 -0
- data/lib/animation.rb +9 -0
- data/stylesheets/_animation.sass +2 -0
- data/stylesheets/animation/animate.sass +27 -0
- data/stylesheets/animation/animate/_attention-seekers.sass +120 -0
- data/stylesheets/animation/animate/_bouncing.sass +3 -0
- data/stylesheets/animation/animate/_fading.sass +3 -0
- data/stylesheets/animation/animate/_rotating.sass +3 -0
- data/stylesheets/animation/animate/_specials.sass +40 -0
- data/stylesheets/animation/animate/bouncing/_bouncing-entrances.sass +64 -0
- data/stylesheets/animation/animate/bouncing/_bouncing-exits.sass +56 -0
- data/stylesheets/animation/animate/fading/_fading-entrances.sass +78 -0
- data/stylesheets/animation/animate/fading/_fading-exits.sass +78 -0
- data/stylesheets/animation/animate/rotating/_rotating-entrances.sass +54 -0
- data/stylesheets/animation/animate/rotating/_rotating-exits.sass +54 -0
- data/stylesheets/animation/core.sass +83 -0
- metadata +117 -0
data/README.mdown
ADDED
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
Animation Compass Plugin
|
|
2
|
+
========================
|
|
3
|
+
|
|
4
|
+
First and foremost, this plugin gives you all the tools you need to write and apply css3 animations. As a bonus, and only if you so choose, it also supplies you with a "shit-ton" (roughly 2 metric tons) of pre-fabricated animations taken from Dan Eden's "[Animate.css](http://daneden.me/animate/)" project.
|
|
5
|
+
|
|
6
|
+
It's a funny thing. This plugin is built in Sass rather than Scss, because it [only works in Sass](https://gist.github.com/1607696). It also requires the most recent alpha releases of both Sass (3.2.0.alpha.35) and Compass (0.12.alpha.0).
|
data/lib/animation.rb
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
// Animations from Animate.css
|
|
3
|
+
// Author : Dan Eden
|
|
4
|
+
// URL : http://daneden.me/animate/
|
|
5
|
+
//
|
|
6
|
+
// Attention seekers
|
|
7
|
+
// - flash bounce shake tada swing wobble pulse
|
|
8
|
+
// Fading entrances
|
|
9
|
+
// - fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig
|
|
10
|
+
// Fading exits
|
|
11
|
+
// - fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig
|
|
12
|
+
// Bouncing entrances
|
|
13
|
+
// - bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight
|
|
14
|
+
// Bouncing exits
|
|
15
|
+
// - bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight
|
|
16
|
+
// Rotating entrances
|
|
17
|
+
// - rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight
|
|
18
|
+
// Rotating exits
|
|
19
|
+
// - rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight
|
|
20
|
+
// Specials
|
|
21
|
+
// - hinge rollIn rollOut
|
|
22
|
+
// ---------------------------------------------------------------------------
|
|
23
|
+
@import animate/fading
|
|
24
|
+
@import animate/bouncing
|
|
25
|
+
@import animate/rotating
|
|
26
|
+
@import animate/attention-seekers
|
|
27
|
+
@import animate/specials
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
+keyframes(flash)
|
|
3
|
+
0%
|
|
4
|
+
opacity: 1
|
|
5
|
+
25%
|
|
6
|
+
opacity: 0
|
|
7
|
+
50%
|
|
8
|
+
opacity: 1
|
|
9
|
+
75%
|
|
10
|
+
opacity: 0
|
|
11
|
+
100%
|
|
12
|
+
opacity: 1
|
|
13
|
+
|
|
14
|
+
// ---------------------------------------------------------------------------
|
|
15
|
+
+keyframes(bounce)
|
|
16
|
+
0%
|
|
17
|
+
+translateY(0)
|
|
18
|
+
20%
|
|
19
|
+
+translateY(0)
|
|
20
|
+
40%
|
|
21
|
+
+translateY(-30px)
|
|
22
|
+
50%
|
|
23
|
+
+translateY(0)
|
|
24
|
+
60%
|
|
25
|
+
+translateY(-15px)
|
|
26
|
+
80%
|
|
27
|
+
+translateY(0)
|
|
28
|
+
100%
|
|
29
|
+
+translateY(0)
|
|
30
|
+
|
|
31
|
+
// ---------------------------------------------------------------------------
|
|
32
|
+
+keyframes(shake)
|
|
33
|
+
0%
|
|
34
|
+
+translateX(0)
|
|
35
|
+
10%
|
|
36
|
+
+translateX(-10px)
|
|
37
|
+
20%
|
|
38
|
+
+translateX(10px)
|
|
39
|
+
30%
|
|
40
|
+
+translateX(-10px)
|
|
41
|
+
40%
|
|
42
|
+
+translateX(10px)
|
|
43
|
+
50%
|
|
44
|
+
+translateX(-10px)
|
|
45
|
+
60%
|
|
46
|
+
+translateX(10px)
|
|
47
|
+
70%
|
|
48
|
+
+translateX(-10px)
|
|
49
|
+
80%
|
|
50
|
+
+translateX(10px)
|
|
51
|
+
90%
|
|
52
|
+
+translateX(-10px)
|
|
53
|
+
100%
|
|
54
|
+
+translateX(0)
|
|
55
|
+
|
|
56
|
+
// ---------------------------------------------------------------------------
|
|
57
|
+
+keyframes(tada)
|
|
58
|
+
0%
|
|
59
|
+
+scale(1)
|
|
60
|
+
10%
|
|
61
|
+
+transform(scale(0.9) rotate(-3deg))
|
|
62
|
+
20%
|
|
63
|
+
+transform(scale(0.9) rotate(-3deg))
|
|
64
|
+
30%
|
|
65
|
+
+transform(scale(1.1) rotate(3deg))
|
|
66
|
+
40%
|
|
67
|
+
+transform(scale(1.1) rotate(-3deg))
|
|
68
|
+
50%
|
|
69
|
+
+transform(scale(1.1) rotate(3deg))
|
|
70
|
+
60%
|
|
71
|
+
+transform(scale(1.1) rotate(-3deg))
|
|
72
|
+
70%
|
|
73
|
+
+transform(scale(1.1) rotate(3deg))
|
|
74
|
+
80%
|
|
75
|
+
+transform(scale(1.1) rotate(-3deg))
|
|
76
|
+
90%
|
|
77
|
+
+transform(scale(1.1) rotate(3deg))
|
|
78
|
+
100%
|
|
79
|
+
+transform(scale(1) rotate(0))
|
|
80
|
+
|
|
81
|
+
// ---------------------------------------------------------------------------
|
|
82
|
+
+keyframes(swing)
|
|
83
|
+
20%, 40%, 60%, 80%, 100%
|
|
84
|
+
+transform-origin(top center)
|
|
85
|
+
20%
|
|
86
|
+
+rotate(15deg)
|
|
87
|
+
40%
|
|
88
|
+
+rotate(-10deg)
|
|
89
|
+
60%
|
|
90
|
+
+rotate(5deg)
|
|
91
|
+
80%
|
|
92
|
+
+rotate(-5deg)
|
|
93
|
+
100%
|
|
94
|
+
+rotate(0deg)
|
|
95
|
+
|
|
96
|
+
// ---------------------------------------------------------------------------
|
|
97
|
+
+keyframes(wobble)
|
|
98
|
+
0%
|
|
99
|
+
+translateX(0%)
|
|
100
|
+
15%
|
|
101
|
+
+transform(translateX(-25%) rotate(-5deg))
|
|
102
|
+
30%
|
|
103
|
+
+transform(translateX(20%) rotate(3deg))
|
|
104
|
+
45%
|
|
105
|
+
+transform(translateX(-15%) rotate(-3deg))
|
|
106
|
+
60%
|
|
107
|
+
+transform(translateX(10%) rotate(2deg))
|
|
108
|
+
75%
|
|
109
|
+
+transform(translateX(-5%) rotate(-1deg))
|
|
110
|
+
100%
|
|
111
|
+
+transform(translateX(0%))
|
|
112
|
+
|
|
113
|
+
// ---------------------------------------------------------------------------
|
|
114
|
+
+keyframes(pulse)
|
|
115
|
+
0%
|
|
116
|
+
+scale(1)
|
|
117
|
+
50%
|
|
118
|
+
+scale(1.1)
|
|
119
|
+
100%
|
|
120
|
+
+scale(1)
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
+keyframes(hinge)
|
|
3
|
+
0%
|
|
4
|
+
+rotate(0)
|
|
5
|
+
+transform-origin(top left)
|
|
6
|
+
+animation-timing-function(ease-in-out)
|
|
7
|
+
20%, 60%
|
|
8
|
+
+rotate(80deg)
|
|
9
|
+
+transform-origin(top left)
|
|
10
|
+
+animation-timing-function(ease-in-out)
|
|
11
|
+
40%
|
|
12
|
+
+rotate(60deg)
|
|
13
|
+
+transform-origin(top left)
|
|
14
|
+
+animation-timing-function(ease-in-out)
|
|
15
|
+
80%
|
|
16
|
+
+transform(rotate(60deg) translateY(0))
|
|
17
|
+
+opacity(1)
|
|
18
|
+
+transform-origin(top left)
|
|
19
|
+
+animation-timing-function(ease-in-out)
|
|
20
|
+
100%
|
|
21
|
+
+translateY(700px)
|
|
22
|
+
+opacity(0)
|
|
23
|
+
|
|
24
|
+
// ---------------------------------------------------------------------------
|
|
25
|
+
+keyframes(rollIn)
|
|
26
|
+
0%
|
|
27
|
+
+opacity(0)
|
|
28
|
+
+transform(translateX(-100%) rotate(-120deg))
|
|
29
|
+
100%
|
|
30
|
+
+opacity(1)
|
|
31
|
+
+transform(translateX(0px) rotate(0deg))
|
|
32
|
+
|
|
33
|
+
// ---------------------------------------------------------------------------
|
|
34
|
+
+keyframes(rollOut)
|
|
35
|
+
0%
|
|
36
|
+
+opacity(1)
|
|
37
|
+
+transform(translateX(0px) rotate(0deg))
|
|
38
|
+
100%
|
|
39
|
+
+opacity(0)
|
|
40
|
+
+transform(translateX(-100%) rotate(-120deg))
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
+keyframes(bounceIn)
|
|
3
|
+
0%
|
|
4
|
+
opacity: 0
|
|
5
|
+
+scale(0.3)
|
|
6
|
+
50%
|
|
7
|
+
opacity: 1
|
|
8
|
+
+scale(1.05)
|
|
9
|
+
70%
|
|
10
|
+
+scale(0.9)
|
|
11
|
+
100%
|
|
12
|
+
+scale(1)
|
|
13
|
+
|
|
14
|
+
// ---------------------------------------------------------------------------
|
|
15
|
+
+keyframes(bounceInDown)
|
|
16
|
+
0%
|
|
17
|
+
opacity: 0
|
|
18
|
+
+translateY(-2000px)
|
|
19
|
+
60%
|
|
20
|
+
opacity: 1
|
|
21
|
+
+translateY(30px)
|
|
22
|
+
80%
|
|
23
|
+
+translateY(-10px)
|
|
24
|
+
100%
|
|
25
|
+
+translateY(0)
|
|
26
|
+
|
|
27
|
+
// ---------------------------------------------------------------------------
|
|
28
|
+
+keyframes(bounceInUp)
|
|
29
|
+
0%
|
|
30
|
+
opacity: 0
|
|
31
|
+
+translateY(2000px)
|
|
32
|
+
60%
|
|
33
|
+
opacity: 1
|
|
34
|
+
+translateY(-30px)
|
|
35
|
+
80%
|
|
36
|
+
+translateY(10px)
|
|
37
|
+
100%
|
|
38
|
+
+translateY(0)
|
|
39
|
+
|
|
40
|
+
// ---------------------------------------------------------------------------
|
|
41
|
+
+keyframes(bounceInRight)
|
|
42
|
+
0%
|
|
43
|
+
opacity: 0
|
|
44
|
+
+translateX(2000px)
|
|
45
|
+
60%
|
|
46
|
+
opacity: 1
|
|
47
|
+
+translateX(-30px)
|
|
48
|
+
80%
|
|
49
|
+
+translateX(10px)
|
|
50
|
+
100%
|
|
51
|
+
+translateX(0)
|
|
52
|
+
|
|
53
|
+
// ---------------------------------------------------------------------------
|
|
54
|
+
+keyframes(bounceInLeft)
|
|
55
|
+
0%
|
|
56
|
+
opacity: 0
|
|
57
|
+
+translateX(-2000px)
|
|
58
|
+
60%
|
|
59
|
+
opacity: 1
|
|
60
|
+
+translateX(30px)
|
|
61
|
+
80%
|
|
62
|
+
+translateX(-10px)
|
|
63
|
+
100%
|
|
64
|
+
+translateX(0)
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
+keyframes(bounceOut)
|
|
3
|
+
0%
|
|
4
|
+
+scale(1)
|
|
5
|
+
25%
|
|
6
|
+
+scale(0.95)
|
|
7
|
+
50%
|
|
8
|
+
opacity: 1
|
|
9
|
+
+scale(1.1)
|
|
10
|
+
100%
|
|
11
|
+
opacity: 0
|
|
12
|
+
+scale(0.3)
|
|
13
|
+
|
|
14
|
+
// ---------------------------------------------------------------------------
|
|
15
|
+
+keyframes(bounceOutUp)
|
|
16
|
+
0%
|
|
17
|
+
+translateY(0)
|
|
18
|
+
20%
|
|
19
|
+
opacity: 1
|
|
20
|
+
+translateY(20px)
|
|
21
|
+
100%
|
|
22
|
+
opacity: 0
|
|
23
|
+
+translateY(-2000px)
|
|
24
|
+
|
|
25
|
+
// ---------------------------------------------------------------------------
|
|
26
|
+
+keyframes(bounceOutDown)
|
|
27
|
+
0%
|
|
28
|
+
+translateY(0)
|
|
29
|
+
20%
|
|
30
|
+
opacity: 1
|
|
31
|
+
+translateY(-20px)
|
|
32
|
+
100%
|
|
33
|
+
opacity: 0
|
|
34
|
+
+translateY(2000px)
|
|
35
|
+
|
|
36
|
+
// ---------------------------------------------------------------------------
|
|
37
|
+
+keyframes(bounceOutLeft)
|
|
38
|
+
0%
|
|
39
|
+
+translateX(0)
|
|
40
|
+
20%
|
|
41
|
+
opacity: 1
|
|
42
|
+
+translateX(20px)
|
|
43
|
+
100%
|
|
44
|
+
opacity: 0
|
|
45
|
+
+translateX(-2000px)
|
|
46
|
+
|
|
47
|
+
// ---------------------------------------------------------------------------
|
|
48
|
+
+keyframes(bounceOutRight)
|
|
49
|
+
0%
|
|
50
|
+
+translateX(0)
|
|
51
|
+
20%
|
|
52
|
+
opacity: 1
|
|
53
|
+
+translateX(-20px)
|
|
54
|
+
100%
|
|
55
|
+
opacity: 0
|
|
56
|
+
+translateX(2000px)
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
+keyframes(fadeIn)
|
|
3
|
+
0%
|
|
4
|
+
opacity: 0
|
|
5
|
+
100%
|
|
6
|
+
opacity: 1
|
|
7
|
+
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
+keyframes(fadeInUp)
|
|
10
|
+
0%
|
|
11
|
+
+translateY(20px)
|
|
12
|
+
opacity: 0
|
|
13
|
+
100%
|
|
14
|
+
+translateY(0)
|
|
15
|
+
opacity: 1
|
|
16
|
+
|
|
17
|
+
// ---------------------------------------------------------------------------
|
|
18
|
+
+keyframes(fadeInDown)
|
|
19
|
+
0%
|
|
20
|
+
+translateY(-20px)
|
|
21
|
+
opacity: 0
|
|
22
|
+
100%
|
|
23
|
+
+translateY(0)
|
|
24
|
+
opacity: 1
|
|
25
|
+
|
|
26
|
+
// ---------------------------------------------------------------------------
|
|
27
|
+
+keyframes(fadeInRight)
|
|
28
|
+
0%
|
|
29
|
+
+translateX(20px)
|
|
30
|
+
opacity: 0
|
|
31
|
+
100%
|
|
32
|
+
+translateX(0)
|
|
33
|
+
opacity: 1
|
|
34
|
+
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
+keyframes(fadeInLeft)
|
|
37
|
+
0%
|
|
38
|
+
+translateX(-20px)
|
|
39
|
+
opacity: 0
|
|
40
|
+
100%
|
|
41
|
+
+translateX(0)
|
|
42
|
+
opacity: 1
|
|
43
|
+
|
|
44
|
+
// ---------------------------------------------------------------------------
|
|
45
|
+
+keyframes(fadeInUpBig)
|
|
46
|
+
0%
|
|
47
|
+
+translateY(2000px)
|
|
48
|
+
opacity: 0
|
|
49
|
+
100%
|
|
50
|
+
+translateY(0)
|
|
51
|
+
opacity: 1
|
|
52
|
+
|
|
53
|
+
// ---------------------------------------------------------------------------
|
|
54
|
+
+keyframes(fadeInDownBig)
|
|
55
|
+
0%
|
|
56
|
+
opacity: 0
|
|
57
|
+
+translateY(-2000px)
|
|
58
|
+
100%
|
|
59
|
+
opacity: 1
|
|
60
|
+
+translateY(0)
|
|
61
|
+
|
|
62
|
+
// ---------------------------------------------------------------------------
|
|
63
|
+
+keyframes(fadeInRightBig)
|
|
64
|
+
0%
|
|
65
|
+
opacity: 0
|
|
66
|
+
+translateX(2000px)
|
|
67
|
+
100%
|
|
68
|
+
opacity: 1
|
|
69
|
+
+translateX(0)
|
|
70
|
+
|
|
71
|
+
// ---------------------------------------------------------------------------
|
|
72
|
+
+keyframes(fadeInLeftBig)
|
|
73
|
+
0%
|
|
74
|
+
opacity: 0
|
|
75
|
+
+translateX(-2000px)
|
|
76
|
+
100%
|
|
77
|
+
opacity: 1
|
|
78
|
+
+translateX(0)
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
+keyframes(fadeOut)
|
|
3
|
+
0%
|
|
4
|
+
opacity: 1
|
|
5
|
+
100%
|
|
6
|
+
opacity: 0
|
|
7
|
+
|
|
8
|
+
// ---------------------------------------------------------------------------
|
|
9
|
+
+keyframes(fadeOutUp)
|
|
10
|
+
0%
|
|
11
|
+
+translateY(0)
|
|
12
|
+
opacity: 1
|
|
13
|
+
100%
|
|
14
|
+
+translateY(-20px)
|
|
15
|
+
opacity: 0
|
|
16
|
+
|
|
17
|
+
// ---------------------------------------------------------------------------
|
|
18
|
+
+keyframes(fadeOutDown)
|
|
19
|
+
0%
|
|
20
|
+
+translateY(0)
|
|
21
|
+
opacity: 1
|
|
22
|
+
100%
|
|
23
|
+
+translateY(20px)
|
|
24
|
+
opacity: 0
|
|
25
|
+
|
|
26
|
+
// ---------------------------------------------------------------------------
|
|
27
|
+
+keyframes(fadeOutRight)
|
|
28
|
+
0%
|
|
29
|
+
+translateX(0)
|
|
30
|
+
opacity: 1
|
|
31
|
+
100%
|
|
32
|
+
+translateX(20px)
|
|
33
|
+
opacity: 0
|
|
34
|
+
|
|
35
|
+
// ---------------------------------------------------------------------------
|
|
36
|
+
+keyframes(fadeOutLeft)
|
|
37
|
+
0%
|
|
38
|
+
+translateX(0)
|
|
39
|
+
opacity: 1
|
|
40
|
+
100%
|
|
41
|
+
+translateX(-20px)
|
|
42
|
+
opacity: 0
|
|
43
|
+
|
|
44
|
+
// ---------------------------------------------------------------------------
|
|
45
|
+
+keyframes(fadeOutUpBig)
|
|
46
|
+
0%
|
|
47
|
+
+translateY(0)
|
|
48
|
+
opacity: 1
|
|
49
|
+
100%
|
|
50
|
+
+translateY(-2000px)
|
|
51
|
+
opacity: 0
|
|
52
|
+
|
|
53
|
+
// ---------------------------------------------------------------------------
|
|
54
|
+
+keyframes(fadeOutDownBig)
|
|
55
|
+
0%
|
|
56
|
+
opacity: 1
|
|
57
|
+
+translateY(0)
|
|
58
|
+
100%
|
|
59
|
+
opacity: 0
|
|
60
|
+
+translateY(2000px)
|
|
61
|
+
|
|
62
|
+
// ---------------------------------------------------------------------------
|
|
63
|
+
+keyframes(fadeOutRightBig)
|
|
64
|
+
0%
|
|
65
|
+
opacity: 1
|
|
66
|
+
+translateX(0)
|
|
67
|
+
100%
|
|
68
|
+
opacity: 0
|
|
69
|
+
+translateX(2000px)
|
|
70
|
+
|
|
71
|
+
// ---------------------------------------------------------------------------
|
|
72
|
+
+keyframes(fadeOutLeftBig)
|
|
73
|
+
0%
|
|
74
|
+
opacity: 1
|
|
75
|
+
+translateX(0)
|
|
76
|
+
100%
|
|
77
|
+
opacity: 0
|
|
78
|
+
+translateX(-2000px)
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
+keyframes(rotateIn)
|
|
3
|
+
0%
|
|
4
|
+
+transform-origin(center center)
|
|
5
|
+
+rotate(-200deg)
|
|
6
|
+
opacity: 0
|
|
7
|
+
100%
|
|
8
|
+
+transform-origin(center center)
|
|
9
|
+
+rotate(0)
|
|
10
|
+
opacity: 1
|
|
11
|
+
|
|
12
|
+
// ---------------------------------------------------------------------------
|
|
13
|
+
+keyframes(rotateInDownLeft)
|
|
14
|
+
0%
|
|
15
|
+
+transform-origin(left bottom)
|
|
16
|
+
+rotate(-90deg)
|
|
17
|
+
opacity: 0
|
|
18
|
+
100%
|
|
19
|
+
+transform-origin(left bottom)
|
|
20
|
+
+rotate(0)
|
|
21
|
+
opacity: 1
|
|
22
|
+
|
|
23
|
+
// ---------------------------------------------------------------------------
|
|
24
|
+
+keyframes(rotateInUpLeft)
|
|
25
|
+
0%
|
|
26
|
+
+transform-origin(left bottom)
|
|
27
|
+
+rotate(90deg)
|
|
28
|
+
opacity: 0
|
|
29
|
+
100%
|
|
30
|
+
+transform-origin(left bottom)
|
|
31
|
+
+rotate(0)
|
|
32
|
+
opacity: 1
|
|
33
|
+
|
|
34
|
+
// ---------------------------------------------------------------------------
|
|
35
|
+
+keyframes(rotateInUpRight)
|
|
36
|
+
0%
|
|
37
|
+
+transform-origin(right bottom)
|
|
38
|
+
+rotate(-90deg)
|
|
39
|
+
opacity: 0
|
|
40
|
+
100%
|
|
41
|
+
+transform-origin(right bottom)
|
|
42
|
+
+rotate(0)
|
|
43
|
+
opacity: 1
|
|
44
|
+
|
|
45
|
+
// ---------------------------------------------------------------------------
|
|
46
|
+
+keyframes(rotateInDownRight)
|
|
47
|
+
0%
|
|
48
|
+
+transform-origin(right bottom)
|
|
49
|
+
+rotate(90deg)
|
|
50
|
+
opacity: 0
|
|
51
|
+
100%
|
|
52
|
+
+transform-origin(right bottom)
|
|
53
|
+
+rotate(0)
|
|
54
|
+
opacity: 1
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
+keyframes(rotateOut)
|
|
3
|
+
0%
|
|
4
|
+
+transform-origin(center center)
|
|
5
|
+
+rotate(0)
|
|
6
|
+
opacity: 1
|
|
7
|
+
100%
|
|
8
|
+
+transform-origin(center center)
|
|
9
|
+
+rotate(200deg)
|
|
10
|
+
opacity: 0
|
|
11
|
+
|
|
12
|
+
// ---------------------------------------------------------------------------
|
|
13
|
+
+keyframes(rotateOutDownLeft)
|
|
14
|
+
0%
|
|
15
|
+
+transform-origin(left bottom)
|
|
16
|
+
+rotate(0)
|
|
17
|
+
opacity: 1
|
|
18
|
+
100%
|
|
19
|
+
+transform-origin(left bottom)
|
|
20
|
+
+rotate(90deg)
|
|
21
|
+
opacity: 0
|
|
22
|
+
|
|
23
|
+
// ---------------------------------------------------------------------------
|
|
24
|
+
+keyframes(rotateOutUpLeft)
|
|
25
|
+
0%
|
|
26
|
+
+transform-origin(left bottom)
|
|
27
|
+
+rotate(0)
|
|
28
|
+
opacity: 1
|
|
29
|
+
100%
|
|
30
|
+
+transform-origin(left bottom)
|
|
31
|
+
+rotate(-90deg)
|
|
32
|
+
opacity: 0
|
|
33
|
+
|
|
34
|
+
// ---------------------------------------------------------------------------
|
|
35
|
+
+keyframes(rotateOutDownRight)
|
|
36
|
+
0%
|
|
37
|
+
+transform-origin(right bottom)
|
|
38
|
+
+rotate(0)
|
|
39
|
+
opacity: 1
|
|
40
|
+
100%
|
|
41
|
+
+transform-origin(right bottom)
|
|
42
|
+
+rotate(-90deg)
|
|
43
|
+
opacity: 0
|
|
44
|
+
|
|
45
|
+
// ---------------------------------------------------------------------------
|
|
46
|
+
+keyframes(rotateOutUpRight)
|
|
47
|
+
0%
|
|
48
|
+
+transform-origin(right bottom)
|
|
49
|
+
+rotate(0)
|
|
50
|
+
opacity: 1
|
|
51
|
+
100%
|
|
52
|
+
+transform-origin(right bottom)
|
|
53
|
+
+rotate(90deg)
|
|
54
|
+
opacity: 0
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
// ---------------------------------------------------------------------------
|
|
2
|
+
// Apply an animation property and value with the correct browser support
|
|
3
|
+
=animation-support($property,$value)
|
|
4
|
+
+experimental($property, $value, -moz, -webkit, not -o, -ms, not -khtml, official)
|
|
5
|
+
|
|
6
|
+
// ---------------------------------------------------------------------------
|
|
7
|
+
// Set your animation defaults.
|
|
8
|
+
// $default-animation-name : Name of any animation as a string. [<name>]
|
|
9
|
+
// $default-animation-duration : Duration of the entire animation. [<seconds>]
|
|
10
|
+
// $default-animation-delay : Delay for start of animation. [<seconds>]
|
|
11
|
+
// $default-animation-timing-function : The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]
|
|
12
|
+
// $default-animation-iteration-count : The number of times an animation cycle is played. [infinite | <number>]
|
|
13
|
+
// $default-animation-direction : Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
|
|
14
|
+
// $default-animation-fill-mode : What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
|
|
15
|
+
|
|
16
|
+
$default-animation-name : false
|
|
17
|
+
$default-animation-duration : false
|
|
18
|
+
$default-animation-delay : false
|
|
19
|
+
$default-animation-timing-function : false
|
|
20
|
+
$default-animation-iteration-count : false
|
|
21
|
+
$default-animation-direction : false
|
|
22
|
+
$default-animation-fill-mode : false
|
|
23
|
+
|
|
24
|
+
// ---------------------------------------------------------------------------
|
|
25
|
+
// Create up a named animation sequesnce that can be applied to elements later.
|
|
26
|
+
// $name - The name of your animation.
|
|
27
|
+
// @content - The keyframes of the animation.
|
|
28
|
+
=keyframes($name)
|
|
29
|
+
@-webkit-keyframes #{$name}
|
|
30
|
+
@content
|
|
31
|
+
@-moz-keyframes #{$name}
|
|
32
|
+
@content
|
|
33
|
+
@-ms-keyframes #{$name}
|
|
34
|
+
@content
|
|
35
|
+
@keyframes #{$name}
|
|
36
|
+
@content
|
|
37
|
+
|
|
38
|
+
// ---------------------------------------------------------------------------
|
|
39
|
+
=animation-name($name-1: $default-animation-name, $name-2: false, $name-3: false, $name-4: false, $name-5: false, $name-6: false, $name-7: false, $name-8: false, $name-9: false, $name-10: false)
|
|
40
|
+
$name: compact($name-1, $name-2, $name-3, $name-4, $name-5, $name-6, $name-7, $name-8, $name-9, $name-10)
|
|
41
|
+
+animation-support(animation-name, $name)
|
|
42
|
+
|
|
43
|
+
// ---------------------------------------------------------------------------
|
|
44
|
+
=animation-duration($duration-1: $default-animation-duration, $duration-2: false, $duration-3: false, $duration-4: false, $duration-5: false, $duration-6: false, $duration-7: false, $duration-8: false, $duration-9: false, $duration-10: false)
|
|
45
|
+
$duration: compact($duration-1, $duration-2, $duration-3, $duration-4, $duration-5, $duration-6, $duration-7, $duration-8, $duration-9, $duration-10)
|
|
46
|
+
+animation-support(animation-duration, $duration)
|
|
47
|
+
|
|
48
|
+
// ---------------------------------------------------------------------------
|
|
49
|
+
=animation-delay($delay-1: $default-animation-delay, $delay-2: false, $delay-3: false, $delay-4: false, $delay-5: false, $delay-6: false, $delay-7: false, $delay-8: false, $delay-9: false, $delay-10: false)
|
|
50
|
+
$delay: compact($delay-1, $delay-2, $delay-3, $delay-4, $delay-5, $delay-6, $delay-7, $delay-8, $delay-9, $delay-10)
|
|
51
|
+
+animation-support(animation-delay, $delay)
|
|
52
|
+
|
|
53
|
+
// ---------------------------------------------------------------------------
|
|
54
|
+
=animation-timing-function($function-1: $default-animation-timing-function, $function-2: false, $function-3: false, $function-4: false, $function-5: false, $function-6: false, $function-7: false, $function-8: false, $function-9: false, $function-10: false)
|
|
55
|
+
$function: compact($function-1, $function-2, $function-3, $function-4, $function-5, $function-6, $function-7, $function-8, $function-9, $function-10)
|
|
56
|
+
+animation-support(animation-timing-function, $function)
|
|
57
|
+
|
|
58
|
+
// ---------------------------------------------------------------------------
|
|
59
|
+
=animation-iteration-count($count-1: $default-animation-iteration-count, $count-2: false, $count-3: false, $count-4: false, $count-5: false, $count-6: false, $count-7: false, $count-8: false, $count-9: false, $count-10: false)
|
|
60
|
+
$count: compact($count-1, $count-2, $count-3, $count-4, $count-5, $count-6, $count-7, $count-8, $count-9, $count-10)
|
|
61
|
+
+animation-support(animation-iteration-count, $count)
|
|
62
|
+
|
|
63
|
+
// ---------------------------------------------------------------------------
|
|
64
|
+
=animation-direction($direction-1: $default-animation-direction, $direction-2: false, $direction-3: false, $direction-4: false, $direction-5: false, $direction-6: false, $direction-7: false, $direction-8: false, $direction-9: false, $direction-10: false)
|
|
65
|
+
$direction: compact($direction-1, $direction-2, $direction-3, $direction-4, $direction-5, $direction-6, $direction-7, $direction-8, $direction-9, $direction-10)
|
|
66
|
+
+animation-support(animation-direction, $direction)
|
|
67
|
+
|
|
68
|
+
// ---------------------------------------------------------------------------
|
|
69
|
+
=animation-fill-mode($mode-1: $default-animation-fill-mode, $mode-2: false, $mode-3: false, $mode-4: false, $mode-5: false, $mode-6: false, $mode-7: false, $mode-8: false, $mode-9: false, $mode-10: false)
|
|
70
|
+
$mode: compact($mode-1, $mode-2, $mode-3, $mode-4, $mode-5, $mode-6, $mode-7, $mode-8, $mode-9, $mode-10)
|
|
71
|
+
+animation-support(animation-fill-mode, $mode)
|
|
72
|
+
|
|
73
|
+
// ---------------------------------------------------------------------------
|
|
74
|
+
// Shortcut to apply a named animation to an element, with all the settings.
|
|
75
|
+
// $animation-1 : Name and settings for the first animation. [<values> | default]
|
|
76
|
+
// ...
|
|
77
|
+
// $animation-10 : Name and settings for the tenth animation. <values>
|
|
78
|
+
=animation($animation-1: default, $animation-2: false, $animation-3: false, $animation-4: false, $animation-5: false, $animation-6: false, $animation-7: false, $animation-8: false, $animation-9: false, $animation-10: false)
|
|
79
|
+
@if $animation-1 == default
|
|
80
|
+
$animation-1: -compass-space-list(compact($default-animation-name, $default-animation-duration, $default-animation-timing-function, $default-animation-delay, $default-animation-iteration-count, $default-animation-direction, $default-animation-fill-mode))
|
|
81
|
+
|
|
82
|
+
$animation: compact($animation-1, $animation-2, $animation-3, $animation-4, $animation-5, $animation-6, $animation-7, $animation-8, $animation-9, $animation-10)
|
|
83
|
+
+animation-support(animation, $animation)
|
metadata
ADDED
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: animation
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
hash: -3702664284
|
|
5
|
+
prerelease: 4
|
|
6
|
+
segments:
|
|
7
|
+
- 0
|
|
8
|
+
- 1
|
|
9
|
+
- alpha
|
|
10
|
+
- 0
|
|
11
|
+
version: 0.1.alpha.0
|
|
12
|
+
platform: ruby
|
|
13
|
+
authors:
|
|
14
|
+
- Eric Meyer
|
|
15
|
+
autorequire:
|
|
16
|
+
bindir: bin
|
|
17
|
+
cert_chain: []
|
|
18
|
+
|
|
19
|
+
date: 2012-01-18 00:00:00 Z
|
|
20
|
+
dependencies:
|
|
21
|
+
- !ruby/object:Gem::Dependency
|
|
22
|
+
name: sass
|
|
23
|
+
prerelease: false
|
|
24
|
+
requirement: &id001 !ruby/object:Gem::Requirement
|
|
25
|
+
none: false
|
|
26
|
+
requirements:
|
|
27
|
+
- - ">="
|
|
28
|
+
- !ruby/object:Gem::Version
|
|
29
|
+
hash: -3702664358
|
|
30
|
+
segments:
|
|
31
|
+
- 3
|
|
32
|
+
- 2
|
|
33
|
+
- 0
|
|
34
|
+
- alpha
|
|
35
|
+
- 35
|
|
36
|
+
version: 3.2.0.alpha.35
|
|
37
|
+
type: :runtime
|
|
38
|
+
version_requirements: *id001
|
|
39
|
+
- !ruby/object:Gem::Dependency
|
|
40
|
+
name: compass
|
|
41
|
+
prerelease: false
|
|
42
|
+
requirement: &id002 !ruby/object:Gem::Requirement
|
|
43
|
+
none: false
|
|
44
|
+
requirements:
|
|
45
|
+
- - ">="
|
|
46
|
+
- !ruby/object:Gem::Version
|
|
47
|
+
hash: -3702664244
|
|
48
|
+
segments:
|
|
49
|
+
- 0
|
|
50
|
+
- 12
|
|
51
|
+
- alpha
|
|
52
|
+
- 0
|
|
53
|
+
version: 0.12.alpha.0
|
|
54
|
+
type: :runtime
|
|
55
|
+
version_requirements: *id002
|
|
56
|
+
description: css3 animations plugin for compass
|
|
57
|
+
email: eric@oddbird.net
|
|
58
|
+
executables: []
|
|
59
|
+
|
|
60
|
+
extensions: []
|
|
61
|
+
|
|
62
|
+
extra_rdoc_files: []
|
|
63
|
+
|
|
64
|
+
files:
|
|
65
|
+
- README.mdown
|
|
66
|
+
- lib/animation.rb
|
|
67
|
+
- stylesheets/_animation.sass
|
|
68
|
+
- stylesheets/animation/animate/_attention-seekers.sass
|
|
69
|
+
- stylesheets/animation/animate/_bouncing.sass
|
|
70
|
+
- stylesheets/animation/animate/_fading.sass
|
|
71
|
+
- stylesheets/animation/animate/_rotating.sass
|
|
72
|
+
- stylesheets/animation/animate/_specials.sass
|
|
73
|
+
- stylesheets/animation/animate/bouncing/_bouncing-entrances.sass
|
|
74
|
+
- stylesheets/animation/animate/bouncing/_bouncing-exits.sass
|
|
75
|
+
- stylesheets/animation/animate/fading/_fading-entrances.sass
|
|
76
|
+
- stylesheets/animation/animate/fading/_fading-exits.sass
|
|
77
|
+
- stylesheets/animation/animate/rotating/_rotating-entrances.sass
|
|
78
|
+
- stylesheets/animation/animate/rotating/_rotating-exits.sass
|
|
79
|
+
- stylesheets/animation/animate.sass
|
|
80
|
+
- stylesheets/animation/core.sass
|
|
81
|
+
homepage: https://github.com/ericam/compass-animation
|
|
82
|
+
licenses: []
|
|
83
|
+
|
|
84
|
+
post_install_message:
|
|
85
|
+
rdoc_options: []
|
|
86
|
+
|
|
87
|
+
require_paths:
|
|
88
|
+
- lib
|
|
89
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
90
|
+
none: false
|
|
91
|
+
requirements:
|
|
92
|
+
- - ">="
|
|
93
|
+
- !ruby/object:Gem::Version
|
|
94
|
+
hash: 3
|
|
95
|
+
segments:
|
|
96
|
+
- 0
|
|
97
|
+
version: "0"
|
|
98
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
99
|
+
none: false
|
|
100
|
+
requirements:
|
|
101
|
+
- - ">"
|
|
102
|
+
- !ruby/object:Gem::Version
|
|
103
|
+
hash: 25
|
|
104
|
+
segments:
|
|
105
|
+
- 1
|
|
106
|
+
- 3
|
|
107
|
+
- 1
|
|
108
|
+
version: 1.3.1
|
|
109
|
+
requirements: []
|
|
110
|
+
|
|
111
|
+
rubyforge_project:
|
|
112
|
+
rubygems_version: 1.8.15
|
|
113
|
+
signing_key:
|
|
114
|
+
specification_version: 3
|
|
115
|
+
summary: css3 animations plugin for compass
|
|
116
|
+
test_files: []
|
|
117
|
+
|