animate 0.1.0 → 0.2.beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/stylesheets/_animate.scss +15 -9
- data/stylesheets/_helpers.scss +10 -6
- data/stylesheets/animate/_attention.scss +13 -9
- data/stylesheets/animate/_bounce.scss +40 -34
- data/stylesheets/animate/_fade.scss +25 -21
- data/stylesheets/animate/_flip.scss +47 -33
- data/stylesheets/animate/_lightSpeed.scss +7 -3
- data/stylesheets/animate/_roll.scss +7 -3
- data/stylesheets/animate/_rotate.scss +17 -14
- data/stylesheets/animate/_special.scss +6 -2
- data/stylesheets/animate/attention/_flash.scss +21 -16
- data/stylesheets/animate/attention/_pulse.scss +15 -10
- data/stylesheets/animate/attention/_shake.scss +39 -34
- data/stylesheets/animate/attention/_swing.scss +24 -19
- data/stylesheets/animate/attention/_tada.scss +38 -33
- data/stylesheets/animate/attention/_wiggle.scss +39 -34
- data/stylesheets/animate/attention/_wobble.scss +27 -22
- data/stylesheets/animate/bounce/_bounceIn.scss +100 -75
- data/stylesheets/animate/bounce/_bounceOut.scss +88 -63
- data/stylesheets/animate/fade/_fadeIn.scss +133 -88
- data/stylesheets/animate/fade/_fadeOut.scss +133 -88
- data/stylesheets/animate/flip/_flipIn.scss +47 -33
- data/stylesheets/animate/flip/_flipOut.scss +35 -21
- data/stylesheets/animate/lightSpeed/_lightSpeedIn.scss +22 -17
- data/stylesheets/animate/lightSpeed/_lightSpeedOut.scss +14 -9
- data/stylesheets/animate/roll/_rollIn.scss +14 -9
- data/stylesheets/animate/roll/_rollOut.scss +13 -8
- data/stylesheets/animate/rotate/_rotateIn.scss +114 -72
- data/stylesheets/animate/rotate/_rotateOut.scss +114 -72
- data/stylesheets/animate/special/_hinge.scss +32 -27
- metadata +10 -7
@@ -6,8 +6,12 @@
|
|
6
6
|
// ---------------------------------------------------------------------------
|
7
7
|
// special [ hinge | all ]
|
8
8
|
|
9
|
-
@mixin animate-special(
|
9
|
+
@mixin animate-special(
|
10
|
+
$sub : all,
|
11
|
+
$class : $default-animation-class-mode,
|
12
|
+
$keyframes : $default-keyframes-output
|
13
|
+
) {
|
10
14
|
$sub : compact($sub);
|
11
15
|
$hinge : yepnope($sub, all hinge);
|
12
|
-
@if $hinge { @include animate-hinge($class); }
|
16
|
+
@if $hinge { @include animate-hinge($class, $keyframes); }
|
13
17
|
}
|
@@ -6,24 +6,29 @@
|
|
6
6
|
// ---------------------------------------------------------------------------
|
7
7
|
// flash
|
8
8
|
|
9
|
-
@mixin animate-flash(
|
9
|
+
@mixin animate-flash(
|
10
|
+
$class : $default-animation-class-mode,
|
11
|
+
$keyframes : $default-keyframes-output
|
12
|
+
) {
|
10
13
|
$name: flash;
|
11
|
-
@
|
12
|
-
|
13
|
-
|
14
|
+
@if $keyframes {
|
15
|
+
@include keyframes($name) {
|
16
|
+
0% {
|
17
|
+
opacity: 1;
|
18
|
+
}
|
19
|
+
25% {
|
20
|
+
opacity: 0;
|
21
|
+
}
|
22
|
+
50% {
|
23
|
+
opacity: 1;
|
24
|
+
}
|
25
|
+
75% {
|
26
|
+
opacity: 0;
|
27
|
+
}
|
28
|
+
100% {
|
29
|
+
opacity: 1;
|
30
|
+
}
|
14
31
|
}
|
15
|
-
25% {
|
16
|
-
opacity: 0;
|
17
|
-
}
|
18
|
-
50% {
|
19
|
-
opacity: 1;
|
20
|
-
}
|
21
|
-
75% {
|
22
|
-
opacity: 0;
|
23
|
-
}
|
24
|
-
100% {
|
25
|
-
opacity: 1;
|
26
|
-
}
|
27
32
|
}
|
28
33
|
@include animation-class($name, $class) {}
|
29
34
|
}
|
@@ -6,18 +6,23 @@
|
|
6
6
|
// ---------------------------------------------------------------------------
|
7
7
|
// pulse
|
8
8
|
|
9
|
-
@mixin animate-pulse(
|
9
|
+
@mixin animate-pulse(
|
10
|
+
$class : $default-animation-class-mode,
|
11
|
+
$keyframes : $default-keyframes-output
|
12
|
+
) {
|
10
13
|
$name: pulse;
|
11
|
-
@
|
12
|
-
|
13
|
-
|
14
|
+
@if $keyframes {
|
15
|
+
@include keyframes($name) {
|
16
|
+
0% {
|
17
|
+
@include scale(1);
|
18
|
+
}
|
19
|
+
50% {
|
20
|
+
@include scale(1.1);
|
21
|
+
}
|
22
|
+
100% {
|
23
|
+
@include scale(1);
|
24
|
+
}
|
14
25
|
}
|
15
|
-
50% {
|
16
|
-
@include scale(1.1);
|
17
|
-
}
|
18
|
-
100% {
|
19
|
-
@include scale(1);
|
20
|
-
}
|
21
26
|
}
|
22
27
|
@include animation-class($name, $class) {}
|
23
28
|
}
|
@@ -7,42 +7,47 @@
|
|
7
7
|
// ---------------------------------------------------------------------------
|
8
8
|
// shake
|
9
9
|
|
10
|
-
@mixin animate-shake(
|
10
|
+
@mixin animate-shake(
|
11
|
+
$class : $default-animation-class-mode,
|
12
|
+
$keyframes : $default-keyframes-output
|
13
|
+
) {
|
11
14
|
$name: shake;
|
12
|
-
@
|
13
|
-
|
14
|
-
|
15
|
+
@if $keyframes {
|
16
|
+
@include keyframes($name) {
|
17
|
+
0% {
|
18
|
+
@include translateX(0);
|
19
|
+
}
|
20
|
+
10% {
|
21
|
+
@include translateX(-10px);
|
22
|
+
}
|
23
|
+
20% {
|
24
|
+
@include translateX(10px);
|
25
|
+
}
|
26
|
+
30% {
|
27
|
+
@include translateX(-10px);
|
28
|
+
}
|
29
|
+
40% {
|
30
|
+
@include translateX(10px);
|
31
|
+
}
|
32
|
+
50% {
|
33
|
+
@include translateX(-10px);
|
34
|
+
}
|
35
|
+
60% {
|
36
|
+
@include translateX(10px);
|
37
|
+
}
|
38
|
+
70% {
|
39
|
+
@include translateX(-10px);
|
40
|
+
}
|
41
|
+
80% {
|
42
|
+
@include translateX(10px);
|
43
|
+
}
|
44
|
+
90% {
|
45
|
+
@include translateX(-10px);
|
46
|
+
}
|
47
|
+
100% {
|
48
|
+
@include translateX(0);
|
49
|
+
}
|
15
50
|
}
|
16
|
-
10% {
|
17
|
-
@include translateX(-10px);
|
18
|
-
}
|
19
|
-
20% {
|
20
|
-
@include translateX(10px);
|
21
|
-
}
|
22
|
-
30% {
|
23
|
-
@include translateX(-10px);
|
24
|
-
}
|
25
|
-
40% {
|
26
|
-
@include translateX(10px);
|
27
|
-
}
|
28
|
-
50% {
|
29
|
-
@include translateX(-10px);
|
30
|
-
}
|
31
|
-
60% {
|
32
|
-
@include translateX(10px);
|
33
|
-
}
|
34
|
-
70% {
|
35
|
-
@include translateX(-10px);
|
36
|
-
}
|
37
|
-
80% {
|
38
|
-
@include translateX(10px);
|
39
|
-
}
|
40
|
-
90% {
|
41
|
-
@include translateX(-10px);
|
42
|
-
}
|
43
|
-
100% {
|
44
|
-
@include translateX(0);
|
45
|
-
}
|
46
51
|
}
|
47
52
|
@include animation-class($name, $class) {}
|
48
53
|
}
|
@@ -7,27 +7,32 @@
|
|
7
7
|
// ---------------------------------------------------------------------------
|
8
8
|
// swing
|
9
9
|
|
10
|
-
@mixin animate-swing(
|
10
|
+
@mixin animate-swing(
|
11
|
+
$class : $default-animation-class-mode,
|
12
|
+
$keyframes : $default-keyframes-output
|
13
|
+
) {
|
11
14
|
$name: swing;
|
12
|
-
@
|
13
|
-
|
14
|
-
|
15
|
+
@if $keyframes {
|
16
|
+
@include keyframes($name) {
|
17
|
+
20%, 40%, 60%, 80%, 100% {
|
18
|
+
@include transform-origin(top, center);
|
19
|
+
}
|
20
|
+
20% {
|
21
|
+
@include rotate(15deg);
|
22
|
+
}
|
23
|
+
40% {
|
24
|
+
@include rotate(-10deg);
|
25
|
+
}
|
26
|
+
60% {
|
27
|
+
@include rotate(5deg);
|
28
|
+
}
|
29
|
+
80% {
|
30
|
+
@include rotate(-5deg);
|
31
|
+
}
|
32
|
+
100% {
|
33
|
+
@include rotate(0deg);
|
34
|
+
}
|
15
35
|
}
|
16
|
-
20% {
|
17
|
-
@include rotate(15deg);
|
18
|
-
}
|
19
|
-
40% {
|
20
|
-
@include rotate(-10deg);
|
21
|
-
}
|
22
|
-
60% {
|
23
|
-
@include rotate(5deg);
|
24
|
-
}
|
25
|
-
80% {
|
26
|
-
@include rotate(-5deg);
|
27
|
-
}
|
28
|
-
100% {
|
29
|
-
@include rotate(0deg);
|
30
|
-
}
|
31
36
|
}
|
32
37
|
@include animation-class($name, $class) {
|
33
38
|
@include transform-origin(top, center);
|
@@ -6,41 +6,46 @@
|
|
6
6
|
// ---------------------------------------------------------------------------
|
7
7
|
// tada
|
8
8
|
|
9
|
-
@mixin animate-tada(
|
9
|
+
@mixin animate-tada(
|
10
|
+
$class : $default-animation-class-mode,
|
11
|
+
$keyframes : $default-keyframes-output
|
12
|
+
) {
|
10
13
|
$name: tada;
|
11
|
-
@
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
14
|
+
@if $keyframes {
|
15
|
+
@include keyframes($name) {
|
16
|
+
0% {
|
17
|
+
@include scale(1); }
|
18
|
+
10% {
|
19
|
+
@include transform(scale(0.9) rotate(-3deg));
|
20
|
+
}
|
21
|
+
20% {
|
22
|
+
@include transform(scale(0.9) rotate(-3deg));
|
23
|
+
}
|
24
|
+
30% {
|
25
|
+
@include transform(scale(1.1) rotate(3deg));
|
26
|
+
}
|
27
|
+
40% {
|
28
|
+
@include transform(scale(1.1) rotate(-3deg));
|
29
|
+
}
|
30
|
+
50% {
|
31
|
+
@include transform(scale(1.1) rotate(3deg));
|
32
|
+
}
|
33
|
+
60% {
|
34
|
+
@include transform(scale(1.1) rotate(-3deg));
|
35
|
+
}
|
36
|
+
70% {
|
37
|
+
@include transform(scale(1.1) rotate(3deg));
|
38
|
+
}
|
39
|
+
80% {
|
40
|
+
@include transform(scale(1.1) rotate(-3deg));
|
41
|
+
}
|
42
|
+
90% {
|
43
|
+
@include transform(scale(1.1) rotate(3deg));
|
44
|
+
}
|
45
|
+
100% {
|
46
|
+
@include transform(scale(1) rotate(0));
|
47
|
+
}
|
16
48
|
}
|
17
|
-
20% {
|
18
|
-
@include transform(scale(0.9) rotate(-3deg));
|
19
|
-
}
|
20
|
-
30% {
|
21
|
-
@include transform(scale(1.1) rotate(3deg));
|
22
|
-
}
|
23
|
-
40% {
|
24
|
-
@include transform(scale(1.1) rotate(-3deg));
|
25
|
-
}
|
26
|
-
50% {
|
27
|
-
@include transform(scale(1.1) rotate(3deg));
|
28
|
-
}
|
29
|
-
60% {
|
30
|
-
@include transform(scale(1.1) rotate(-3deg));
|
31
|
-
}
|
32
|
-
70% {
|
33
|
-
@include transform(scale(1.1) rotate(3deg));
|
34
|
-
}
|
35
|
-
80% {
|
36
|
-
@include transform(scale(1.1) rotate(-3deg));
|
37
|
-
}
|
38
|
-
90% {
|
39
|
-
@include transform(scale(1.1) rotate(3deg));
|
40
|
-
}
|
41
|
-
100% {
|
42
|
-
@include transform(scale(1) rotate(0));
|
43
|
-
}
|
44
49
|
}
|
45
50
|
@include animation-class($name, $class) {}
|
46
51
|
}
|
@@ -6,42 +6,47 @@
|
|
6
6
|
// ---------------------------------------------------------------------------
|
7
7
|
// wiggle
|
8
8
|
|
9
|
-
@mixin animate-wiggle(
|
9
|
+
@mixin animate-wiggle(
|
10
|
+
$class : $default-animation-class-mode,
|
11
|
+
$keyframes : $default-keyframes-output
|
12
|
+
) {
|
10
13
|
$name: wiggle;
|
11
|
-
@
|
12
|
-
|
13
|
-
|
14
|
+
@if $keyframes {
|
15
|
+
@include keyframes($name) {
|
16
|
+
0% {
|
17
|
+
@include skewX(9deg);
|
18
|
+
}
|
19
|
+
10% {
|
20
|
+
@include skewX(-8deg);
|
21
|
+
}
|
22
|
+
20% {
|
23
|
+
@include skewX(7deg);
|
24
|
+
}
|
25
|
+
30% {
|
26
|
+
@include skewX(-6deg);
|
27
|
+
}
|
28
|
+
40% {
|
29
|
+
@include skewX(5deg);
|
30
|
+
}
|
31
|
+
50% {
|
32
|
+
@include skewX(-4deg);
|
33
|
+
}
|
34
|
+
60% {
|
35
|
+
@include skewX(3deg);
|
36
|
+
}
|
37
|
+
70% {
|
38
|
+
@include skewX(-2deg);
|
39
|
+
}
|
40
|
+
80% {
|
41
|
+
@include skewX(1deg);
|
42
|
+
}
|
43
|
+
90% {
|
44
|
+
@include skewX(0deg);
|
45
|
+
}
|
46
|
+
100% {
|
47
|
+
@include skewX(0deg);
|
48
|
+
}
|
14
49
|
}
|
15
|
-
10% {
|
16
|
-
@include skewX(-8deg);
|
17
|
-
}
|
18
|
-
20% {
|
19
|
-
@include skewX(7deg);
|
20
|
-
}
|
21
|
-
30% {
|
22
|
-
@include skewX(-6deg);
|
23
|
-
}
|
24
|
-
40% {
|
25
|
-
@include skewX(5deg);
|
26
|
-
}
|
27
|
-
50% {
|
28
|
-
@include skewX(-4deg);
|
29
|
-
}
|
30
|
-
60% {
|
31
|
-
@include skewX(3deg);
|
32
|
-
}
|
33
|
-
70% {
|
34
|
-
@include skewX(-2deg);
|
35
|
-
}
|
36
|
-
80% {
|
37
|
-
@include skewX(1deg);
|
38
|
-
}
|
39
|
-
90% {
|
40
|
-
@include skewX(0deg);
|
41
|
-
}
|
42
|
-
100% {
|
43
|
-
@include skewX(0deg);
|
44
|
-
}
|
45
50
|
}
|
46
51
|
@include animation-class($name, $class) {}
|
47
52
|
}
|
@@ -7,30 +7,35 @@
|
|
7
7
|
// ---------------------------------------------------------------------------
|
8
8
|
// wobble
|
9
9
|
|
10
|
-
@mixin animate-wobble(
|
10
|
+
@mixin animate-wobble(
|
11
|
+
$class : $default-animation-class-mode,
|
12
|
+
$keyframes : $default-keyframes-output
|
13
|
+
) {
|
11
14
|
$name: wobble;
|
12
|
-
@
|
13
|
-
|
14
|
-
|
15
|
+
@if $keyframes {
|
16
|
+
@include keyframes($name) {
|
17
|
+
0% {
|
18
|
+
@include translateX(0%);
|
19
|
+
}
|
20
|
+
15% {
|
21
|
+
@include transform(translateX(-25%) rotate(-5deg));
|
22
|
+
}
|
23
|
+
30% {
|
24
|
+
@include transform(translateX(20%) rotate(3deg));
|
25
|
+
}
|
26
|
+
45% {
|
27
|
+
@include transform(translateX(-15%) rotate(-3deg));
|
28
|
+
}
|
29
|
+
60% {
|
30
|
+
@include transform(translateX(10%) rotate(2deg));
|
31
|
+
}
|
32
|
+
75% {
|
33
|
+
@include transform(translateX(-5%) rotate(-1deg));
|
34
|
+
}
|
35
|
+
100% {
|
36
|
+
@include transform(translateX(0%));
|
37
|
+
}
|
15
38
|
}
|
16
|
-
15% {
|
17
|
-
@include transform(translateX(-25%) rotate(-5deg));
|
18
|
-
}
|
19
|
-
30% {
|
20
|
-
@include transform(translateX(20%) rotate(3deg));
|
21
|
-
}
|
22
|
-
45% {
|
23
|
-
@include transform(translateX(-15%) rotate(-3deg));
|
24
|
-
}
|
25
|
-
60% {
|
26
|
-
@include transform(translateX(10%) rotate(2deg));
|
27
|
-
}
|
28
|
-
75% {
|
29
|
-
@include transform(translateX(-5%) rotate(-1deg));
|
30
|
-
}
|
31
|
-
100% {
|
32
|
-
@include transform(translateX(0%));
|
33
|
-
}
|
34
39
|
}
|
35
40
|
@include animation-class($name, $class) {}
|
36
41
|
}
|