compass-animate 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +33 -0
- data/lib/animate.rb +3 -0
- data/stylesheets/_animate.scss +234 -0
- data/stylesheets/animate/bounce.scss +37 -0
- data/stylesheets/animate/bounceIn.scss +43 -0
- data/stylesheets/animate/bounceInDown.scss +43 -0
- data/stylesheets/animate/bounceInLeft.scss +43 -0
- data/stylesheets/animate/bounceInRight.scss +43 -0
- data/stylesheets/animate/bounceInUp.scss +43 -0
- data/stylesheets/animate/bounceOut.scss +43 -0
- data/stylesheets/animate/bounceOutDown.scss +38 -0
- data/stylesheets/animate/bounceOutLeft.scss +38 -0
- data/stylesheets/animate/bounceOutRight.scss +38 -0
- data/stylesheets/animate/bounceOutUp.scss +38 -0
- data/stylesheets/animate/fadeIn.scss +33 -0
- data/stylesheets/animate/fadeInDown.scss +33 -0
- data/stylesheets/animate/fadeInDownBig.scss +33 -0
- data/stylesheets/animate/fadeInLeft.scss +33 -0
- data/stylesheets/animate/fadeInLeftBig.scss +33 -0
- data/stylesheets/animate/fadeInRight.scss +33 -0
- data/stylesheets/animate/fadeInRightBig.scss +33 -0
- data/stylesheets/animate/fadeInUp.scss +33 -0
- data/stylesheets/animate/fadeInUpBig.scss +33 -0
- data/stylesheets/animate/fadeOut.scss +33 -0
- data/stylesheets/animate/fadeOutDown.scss +33 -0
- data/stylesheets/animate/fadeOutDownBig.scss +33 -0
- data/stylesheets/animate/fadeOutLeft.scss +33 -0
- data/stylesheets/animate/fadeOutLeftBig.scss +33 -0
- data/stylesheets/animate/fadeOutRight.scss +33 -0
- data/stylesheets/animate/fadeOutRightBig.scss +33 -0
- data/stylesheets/animate/fadeOutUp.scss +33 -0
- data/stylesheets/animate/fadeOutUpBig.scss +28 -0
- data/stylesheets/animate/flash.scss +33 -0
- data/stylesheets/animate/flip.scss +41 -0
- data/stylesheets/animate/flipInX.scss +33 -0
- data/stylesheets/animate/flipInY.scss +39 -0
- data/stylesheets/animate/flipOutX.scss +33 -0
- data/stylesheets/animate/flipOutY.scss +29 -0
- data/stylesheets/animate/hinge.scss +48 -0
- data/stylesheets/animate/lightSpeedIn.scss +44 -0
- data/stylesheets/animate/lightSpeedOut.scss +34 -0
- data/stylesheets/animate/properties.scss +78 -0
- data/stylesheets/animate/pulse.scss +40 -0
- data/stylesheets/animate/rollIn.scss +35 -0
- data/stylesheets/animate/rollOut.scss +35 -0
- data/stylesheets/animate/rotateIn.scss +33 -0
- data/stylesheets/animate/rotateInDownLeft.scss +33 -0
- data/stylesheets/animate/rotateInDownRight.scss +32 -0
- data/stylesheets/animate/rotateInUpLeft.scss +33 -0
- data/stylesheets/animate/rotateInUpRight.scss +33 -0
- data/stylesheets/animate/rotateOut.scss +33 -0
- data/stylesheets/animate/rotateOutDownLeft.scss +33 -0
- data/stylesheets/animate/rotateOutDownRight.scss +33 -0
- data/stylesheets/animate/rotateOutUpLeft.scss +33 -0
- data/stylesheets/animate/rotateOutUpRight.scss +33 -0
- data/stylesheets/animate/shake.scss +38 -0
- data/stylesheets/animate/swing.scss +50 -0
- data/stylesheets/animate/tada.scss +48 -0
- data/stylesheets/animate/wiggle.scss +78 -0
- data/stylesheets/animate/wobble.scss +60 -0
- metadata +120 -0
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
@-webkit-keyframes flip {
|
|
2
|
+
0% {-webkit-transform: perspective(400px) rotateY(0);-webkit-animation-timing-function: ease-out;}
|
|
3
|
+
40% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out;}
|
|
4
|
+
50% {-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in;}
|
|
5
|
+
80% {-webkit-transform: perspective(400px) rotateY(360deg) scale(.95); -webkit-animation-timing-function: ease-in;}
|
|
6
|
+
100% {-webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in;}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@-moz-keyframes flip {
|
|
10
|
+
0% {-moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out;}
|
|
11
|
+
40% {-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out;}
|
|
12
|
+
50% {-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in;}
|
|
13
|
+
80% {-moz-transform: perspective(400px) rotateY(360deg) scale(.95); -moz-animation-timing-function: ease-in;}
|
|
14
|
+
100% {-moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in;}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@-o-keyframes flip {
|
|
18
|
+
0% {-o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out;}
|
|
19
|
+
40% {
|
|
20
|
+
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out;}
|
|
21
|
+
50% {-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in;}
|
|
22
|
+
80% {-o-transform: perspective(400px) rotateY(360deg) scale(.95); -o-animation-timing-function: ease-in;}
|
|
23
|
+
100% {-o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in;}
|
|
24
|
+
}
|
|
25
|
+
@keyframes flip {
|
|
26
|
+
0% {transform: perspective(400px) rotateY(0); animation-timing-function: ease-out;}
|
|
27
|
+
40% {transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out;}
|
|
28
|
+
50% {transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in;}
|
|
29
|
+
80% {transform: perspective(400px) rotateY(360deg) scale(.95); animation-timing-function: ease-in;}
|
|
30
|
+
100% {transform: perspective(400px) scale(1); animation-timing-function: ease-in;}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin flip($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
34
|
+
@include transform-style(preserve-3d);
|
|
35
|
+
@include animation-name(flip);
|
|
36
|
+
@include duration($duration);
|
|
37
|
+
@include delay($delay);
|
|
38
|
+
@include function($function);
|
|
39
|
+
@include fill-mode($fill);
|
|
40
|
+
@include visibility($visibility);
|
|
41
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@-webkit-keyframes flipInX {
|
|
2
|
+
0% {-webkit-transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
3
|
+
40% {-webkit-transform: perspective(400px) rotateX(-10deg);}
|
|
4
|
+
70% {-webkit-transform: perspective(400px) rotateX(10deg);}
|
|
5
|
+
100% {-webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
6
|
+
}
|
|
7
|
+
@-moz-keyframes flipInX {
|
|
8
|
+
0% {-moz-transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
9
|
+
40% {-moz-transform: perspective(400px) rotateX(-10deg);}
|
|
10
|
+
70% {-moz-transform: perspective(400px) rotateX(10deg);}
|
|
11
|
+
100% {-moz-transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
12
|
+
}
|
|
13
|
+
@-o-keyframes flipInX {
|
|
14
|
+
0% {-o-transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
15
|
+
40% {-o-transform: perspective(400px) rotateX(-10deg);}
|
|
16
|
+
70% {-o-transform: perspective(400px) rotateX(10deg);}
|
|
17
|
+
100% {-o-transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
18
|
+
}
|
|
19
|
+
@keyframes flipInX {
|
|
20
|
+
0% {transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
21
|
+
40% {transform: perspective(400px) rotateX(-10deg);}
|
|
22
|
+
70% {transform: perspective(400px) rotateX(10deg);}
|
|
23
|
+
100% {transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin flipInX($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
27
|
+
@include animation-name(flipInX);
|
|
28
|
+
@include duration($duration);
|
|
29
|
+
@include delay($delay);
|
|
30
|
+
@include function($function);
|
|
31
|
+
@include fill-mode($fill);
|
|
32
|
+
@include visibility($visibility);
|
|
33
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@-webkit-keyframes flipInY {
|
|
2
|
+
0% {-webkit-transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
3
|
+
40% {-webkit-transform: perspective(400px) rotateY(-10deg);}
|
|
4
|
+
70% {-webkit-transform: perspective(400px) rotateY(10deg);}
|
|
5
|
+
100% {-webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
6
|
+
}
|
|
7
|
+
@-moz-keyframes flipInY {
|
|
8
|
+
0% {-moz-transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
9
|
+
40% {-moz-transform: perspective(400px) rotateY(-10deg);}
|
|
10
|
+
70% {-moz-transform: perspective(400px) rotateY(10deg);}
|
|
11
|
+
100% {-moz-transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
12
|
+
}
|
|
13
|
+
@-ms-keyframes flipInY {
|
|
14
|
+
0% {-ms-transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
15
|
+
40% {-ms-transform: perspective(400px) rotateY(-10deg);}
|
|
16
|
+
70% {-ms-transform: perspective(400px) rotateY(10deg);}
|
|
17
|
+
100% {-ms-transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
18
|
+
}
|
|
19
|
+
@-o-keyframes flipInY {
|
|
20
|
+
0% {-o-transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
21
|
+
40% {-o-transform: perspective(400px) rotateY(-10deg);}
|
|
22
|
+
70% {-o-transform: perspective(400px) rotateY(10deg);}
|
|
23
|
+
100% {-o-transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
24
|
+
}
|
|
25
|
+
@keyframes flipInY {
|
|
26
|
+
0% {transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
27
|
+
40% {transform: perspective(400px) rotateY(-10deg);}
|
|
28
|
+
70% {transform: perspective(400px) rotateY(10deg);}
|
|
29
|
+
100% {transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
@mixin flipInY($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
33
|
+
@include animation-name(flipInY);
|
|
34
|
+
@include duration($duration);
|
|
35
|
+
@include delay($delay);
|
|
36
|
+
@include function($function);
|
|
37
|
+
@include fill-mode($fill);
|
|
38
|
+
@include visibility($visibility);
|
|
39
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@-webkit-keyframes flipOutX {
|
|
2
|
+
0% {-webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
3
|
+
100% {-webkit-transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@-moz-keyframes flipOutX {
|
|
7
|
+
0% {-moz-transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
8
|
+
100% {-moz-transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@-ms-keyframes flipOutX {
|
|
12
|
+
0% {-ms-transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
13
|
+
100% {-ms-transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@-o-keyframes flipOutX {
|
|
17
|
+
0% {-o-transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
18
|
+
100% {-o-transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes flipOutX {
|
|
22
|
+
0% {transform: perspective(400px) rotateX(0deg); opacity: 1;}
|
|
23
|
+
100% {transform: perspective(400px) rotateX(90deg); opacity: 0;}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin flipOutX($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
27
|
+
@include animation-name(flipOutX);
|
|
28
|
+
@include duration($duration);
|
|
29
|
+
@include delay($delay);
|
|
30
|
+
@include function($function);
|
|
31
|
+
@include fill-mode($fill);
|
|
32
|
+
@include visibility($visibility);
|
|
33
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@-webkit-keyframes flipOutY {
|
|
2
|
+
0% {-webkit-transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
3
|
+
100% {-webkit-transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
4
|
+
}
|
|
5
|
+
@-moz-keyframes flipOutY {
|
|
6
|
+
0% {-moz-transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
7
|
+
100% {-moz-transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
8
|
+
}
|
|
9
|
+
@-ms-keyframes flipOutY {
|
|
10
|
+
0% {-ms-transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
11
|
+
100% {-ms-transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
12
|
+
}
|
|
13
|
+
@-o-keyframes flipOutY {
|
|
14
|
+
0% {-o-transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
15
|
+
100% {-o-transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
16
|
+
}
|
|
17
|
+
@keyframes flipOutY {
|
|
18
|
+
0% {transform: perspective(400px) rotateY(0deg); opacity: 1;}
|
|
19
|
+
100% {transform: perspective(400px) rotateY(90deg); opacity: 0;}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@mixin flipOutY($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
23
|
+
@include animation-name(flipOutY);
|
|
24
|
+
@include duration($duration);
|
|
25
|
+
@include delay($delay);
|
|
26
|
+
@include function($function);
|
|
27
|
+
@include fill-mode($fill);
|
|
28
|
+
@include visibility($visibility);
|
|
29
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@-webkit-keyframes hinge {
|
|
2
|
+
0% {-webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
|
|
3
|
+
20%, 60% {-webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
|
|
4
|
+
40% {-webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
|
|
5
|
+
80% {-webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;}
|
|
6
|
+
100% {-webkit-transform: translateY(700px); opacity: 0;}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@-moz-keyframes hinge {
|
|
10
|
+
0% {-moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
|
|
11
|
+
20%, 60% {-moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
|
|
12
|
+
40% {-moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
|
|
13
|
+
80% {-moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;}
|
|
14
|
+
100% {-moz-transform: translateY(700px); opacity: 0;}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@-ms-keyframes hinge {
|
|
18
|
+
0% {-ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out;}
|
|
19
|
+
20%, 60% {-ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out;}
|
|
20
|
+
40% {-ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out;}
|
|
21
|
+
80% {-ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out;}
|
|
22
|
+
100% {-ms-transform: translateY(700px); opacity: 0;}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@-o-keyframes hinge {
|
|
26
|
+
0% {-o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
|
|
27
|
+
20%, 60% {-o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
|
|
28
|
+
40% {-o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
|
|
29
|
+
80% {-o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;}
|
|
30
|
+
100% {-o-transform: translateY(700px); opacity: 0;}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@keyframes hinge {
|
|
34
|
+
0% {transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out;}
|
|
35
|
+
20%, 60% {transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out;}
|
|
36
|
+
40% {transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out;}
|
|
37
|
+
80% {transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out;}
|
|
38
|
+
100% {transform: translateY(700px); opacity: 0;}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@mixin hinge($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
42
|
+
@include animation-name(hinge);
|
|
43
|
+
@include duration($duration);
|
|
44
|
+
@include delay($delay);
|
|
45
|
+
@include function($function);
|
|
46
|
+
@include fill-mode($fill);
|
|
47
|
+
@include visibility($visibility);
|
|
48
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@-webkit-keyframes lightSpeedIn {
|
|
2
|
+
0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
3
|
+
60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1;}
|
|
4
|
+
80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1;}
|
|
5
|
+
100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@-moz-keyframes lightSpeedIn {
|
|
9
|
+
0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
10
|
+
60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1;}
|
|
11
|
+
80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1;}
|
|
12
|
+
100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@-ms-keyframes lightSpeedIn {
|
|
16
|
+
0% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
17
|
+
60% { -ms-transform: translateX(-20%) skewX(30deg); opacity: 1;}
|
|
18
|
+
80% { -ms-transform: translateX(0%) skewX(-15deg); opacity: 1;}
|
|
19
|
+
100% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@-o-keyframes lightSpeedIn {
|
|
23
|
+
0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
24
|
+
60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1;}
|
|
25
|
+
80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1;}
|
|
26
|
+
100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@keyframes lightSpeedIn {
|
|
30
|
+
0% { transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
31
|
+
60% { transform: translateX(-20%) skewX(30deg); opacity: 1;}
|
|
32
|
+
80% { transform: translateX(0%) skewX(-15deg); opacity: 1;}
|
|
33
|
+
100% { transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@mixin lightSpeedIn($duration, $delay, $fill, $visibility) {
|
|
37
|
+
@include animation-name(lightSpeedIn);
|
|
38
|
+
@include function(ease-out);
|
|
39
|
+
@include duration($duration);
|
|
40
|
+
@include delay($delay);
|
|
41
|
+
@include function($function);
|
|
42
|
+
@include fill-mode($fill);
|
|
43
|
+
@include visibility($visibility);
|
|
44
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
@-webkit-keyframes lightSpeedOut {
|
|
2
|
+
0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
3
|
+
100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@-moz-keyframes lightSpeedOut {
|
|
7
|
+
0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
8
|
+
100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@-ms-keyframes lightSpeedOut {
|
|
12
|
+
0% { -ms-transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
13
|
+
100% { -ms-transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
@-o-keyframes lightSpeedOut {
|
|
17
|
+
0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
18
|
+
100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes lightSpeedOut {
|
|
22
|
+
0% { transform: translateX(0%) skewX(0deg); opacity: 1;}
|
|
23
|
+
100% { transform: translateX(100%) skewX(-30deg); opacity: 0;}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin lightSpeedOut($duration, $delay, $fill, $visibility) {
|
|
27
|
+
@include animation-name(lightSpeedOut);
|
|
28
|
+
@include function(ease-in);
|
|
29
|
+
@include duration($duration);
|
|
30
|
+
@include delay($delay);
|
|
31
|
+
@include function($function);
|
|
32
|
+
@include fill-mode($fill);
|
|
33
|
+
@include visibility($visibility);
|
|
34
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
// duration Specifies how many seconds or milliseconds an animation takes
|
|
2
|
+
// to complete one cycle. Default 0
|
|
3
|
+
//
|
|
4
|
+
// delay Specifies when the animation will start. Default 0
|
|
5
|
+
//
|
|
6
|
+
// function Describes how the animation will progress over one cycle of its
|
|
7
|
+
// duration. Default "ease"
|
|
8
|
+
//
|
|
9
|
+
// count Specifies the number of times an animation is played. Default 1
|
|
10
|
+
//
|
|
11
|
+
// fill-mode Specifies whether the effects of an animation are apparent
|
|
12
|
+
// before the animation starts and after it ends.
|
|
13
|
+
//
|
|
14
|
+
// visibility Determines whether or not a transformed element is visible when
|
|
15
|
+
// it is not facing the screen.
|
|
16
|
+
|
|
17
|
+
@mixin duration($duration: 1s) {
|
|
18
|
+
-webkit-animation-duration: $duration;
|
|
19
|
+
-moz-animation-duration: $duration;
|
|
20
|
+
-ms-animation-duration: $duration;
|
|
21
|
+
-o-animation-duration: $duration;
|
|
22
|
+
animation-duration: $duration;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
@mixin delay($delay: .2s) {
|
|
26
|
+
-webkit-animation-delay: $delay;
|
|
27
|
+
-moz-animation-delay: $delay;
|
|
28
|
+
-ms-animation-delay: $delay;
|
|
29
|
+
-o-animation-delay: $delay;
|
|
30
|
+
animation-delay: $delay;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin function($function: ease) {
|
|
34
|
+
-webkit-animation-timing-function: $function;
|
|
35
|
+
-moz-animation-timing-function: $function;
|
|
36
|
+
-ms-animation-timing-function: $function;
|
|
37
|
+
-o-animation-timing-function: $function;
|
|
38
|
+
animation-timing-function: $function;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@mixin fill-mode($fill: both) {
|
|
42
|
+
-webkit-animation-fill-mode: $fill;
|
|
43
|
+
-moz-animation-fill-mode: $fill;
|
|
44
|
+
-ms-animation-fill-mode: $fill;
|
|
45
|
+
-o-animation-fill-mode: $fill;
|
|
46
|
+
animation-fill-mode: $fill;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@mixin visibility($visibility: hidden) {
|
|
50
|
+
-webkit-backface-visibility: $visibility;
|
|
51
|
+
-moz-backface-visibility: $visibility;
|
|
52
|
+
-ms-backface-visibility: $visibility;
|
|
53
|
+
-o-backface-visibility: $visibility;
|
|
54
|
+
backface-visibility: $visibility;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@mixin transform-origin($transform-origin: center center) {
|
|
58
|
+
-webkit-transform-origin: $transform-origin;
|
|
59
|
+
-moz-transform-origin: $transform-origin;
|
|
60
|
+
-ms-transform-origin: $transform-origin;
|
|
61
|
+
-o-transform-origin: $transform-origin;
|
|
62
|
+
transform-origin: $transform-origin;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@mixin transform-style($transform-style: flat) {
|
|
66
|
+
-webkit-transform-style: $transform-style;
|
|
67
|
+
-moz-transform-style: $transform-style;
|
|
68
|
+
-o-transform-style: $transform-style;
|
|
69
|
+
transform-style: $transform-style;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@mixin animation-name($animation-name) {
|
|
73
|
+
-webkit-animation-name: $animation-name;
|
|
74
|
+
-moz-animation-name: $animation-name;
|
|
75
|
+
-ms-animation-name: $animation-name;
|
|
76
|
+
-o-animation-name: $animation-name;
|
|
77
|
+
animation-name: $animation-name;
|
|
78
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
// originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
|
2
|
+
|
|
3
|
+
@-webkit-keyframes pulse {
|
|
4
|
+
0% {-webkit-transform: scale(1);}
|
|
5
|
+
50% {-webkit-transform: scale(1.1);}
|
|
6
|
+
100% {-webkit-transform: scale(1);}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
@-moz-keyframes pulse {
|
|
10
|
+
0% {-moz-transform: scale(1);}
|
|
11
|
+
50% {-moz-transform: scale(1.1);}
|
|
12
|
+
100% {-moz-transform: scale(1);}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
@-ms-keyframes pulse {
|
|
16
|
+
0% {-ms-transform: scale(1);}
|
|
17
|
+
50% {-ms-transform: scale(1.1);}
|
|
18
|
+
100% {-ms-transform: scale(1);}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@-o-keyframes pulse {
|
|
22
|
+
0% {-o-transform: scale(1);}
|
|
23
|
+
50% {-o-transform: scale(1.1);}
|
|
24
|
+
100% {-o-transform: scale(1);}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@keyframes pulse {
|
|
28
|
+
0% {transform: scale(1);}
|
|
29
|
+
50% {transform: scale(1.1);}
|
|
30
|
+
100% {transform: scale(1);}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@mixin pulse($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
34
|
+
@include animation-name(pulse);
|
|
35
|
+
@include duration($duration);
|
|
36
|
+
@include delay($delay);
|
|
37
|
+
@include function($function);
|
|
38
|
+
@include fill-mode($fill);
|
|
39
|
+
@include visibility($visibility);
|
|
40
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
// originally authored by Nick Pettit - https://github.com/nickpettit/glide
|
|
2
|
+
|
|
3
|
+
@-webkit-keyframes rollIn {
|
|
4
|
+
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg);}
|
|
5
|
+
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg);}
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@-moz-keyframes rollIn {
|
|
9
|
+
0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg);}
|
|
10
|
+
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg);}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@-ms-keyframes rollIn {
|
|
14
|
+
0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg);}
|
|
15
|
+
100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg);}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@-o-keyframes rollIn {
|
|
19
|
+
0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg);}
|
|
20
|
+
100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg);}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes rollIn {
|
|
24
|
+
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg);}
|
|
25
|
+
100% { opacity: 1; transform: translateX(0px) rotate(0deg);}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@mixin rollIn($duration: 1s, $delay: .2s, $function: ease, $fill: both, $visibility: hidden) {
|
|
29
|
+
@include animation-name(rollIn);
|
|
30
|
+
@include duration($duration);
|
|
31
|
+
@include delay($delay);
|
|
32
|
+
@include function($function);
|
|
33
|
+
@include fill-mode($fill);
|
|
34
|
+
@include visibility($visibility);
|
|
35
|
+
}
|