railsstrap 3.2.0.2 → 3.2.0.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (90) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +39 -4
  3. data/Rakefile +1 -0
  4. data/app/helpers/railsstrap/bootstrap_flash_helper.rb +15 -3
  5. data/app/helpers/railsstrap/navbar_helper.rb +1 -1
  6. data/lib/generators/railsstrap/install/install_generator.rb +18 -0
  7. data/lib/generators/railsstrap/install/templates/bootstrap.coffee +11 -0
  8. data/lib/generators/railsstrap/install/templates/bootstrap.js +15 -3
  9. data/lib/generators/railsstrap/install/templates/bootstrap_and_overrides.css +5 -5
  10. data/lib/generators/railsstrap/install/templates/bootstrap_and_overrides.less +7 -5
  11. data/lib/railsstrap/constants.rb +1 -1
  12. data/vendor/assets/stylesheets/animate/animate.less +31 -0
  13. data/vendor/assets/stylesheets/animate/bounce/bounce.less +41 -0
  14. data/vendor/assets/stylesheets/animate/bounce/bounceIn.less +58 -0
  15. data/vendor/assets/stylesheets/animate/bounce/bounceInDown.less +56 -0
  16. data/vendor/assets/stylesheets/animate/bounce/bounceInLeft.less +56 -0
  17. data/vendor/assets/stylesheets/animate/bounce/bounceInRight.less +56 -0
  18. data/vendor/assets/stylesheets/animate/bounce/bounceInUp.less +56 -0
  19. data/vendor/assets/stylesheets/animate/bounce/bounceOut.less +56 -0
  20. data/vendor/assets/stylesheets/animate/bounce/bounceOutDown.less +45 -0
  21. data/vendor/assets/stylesheets/animate/bounce/bounceOutLeft.less +45 -0
  22. data/vendor/assets/stylesheets/animate/bounce/bounceOutRight.less +45 -0
  23. data/vendor/assets/stylesheets/animate/bounce/bounceOutUp.less +45 -0
  24. data/vendor/assets/stylesheets/animate/fade/fadeIn.less +24 -0
  25. data/vendor/assets/stylesheets/animate/fade/fadeInDown.less +34 -0
  26. data/vendor/assets/stylesheets/animate/fade/fadeInDownBig.less +34 -0
  27. data/vendor/assets/stylesheets/animate/fade/fadeInLeft.less +34 -0
  28. data/vendor/assets/stylesheets/animate/fade/fadeInLeftBig.less +34 -0
  29. data/vendor/assets/stylesheets/animate/fade/fadeInRight.less +34 -0
  30. data/vendor/assets/stylesheets/animate/fade/fadeInRightBig.less +34 -0
  31. data/vendor/assets/stylesheets/animate/fade/fadeInUp.less +34 -0
  32. data/vendor/assets/stylesheets/animate/fade/fadeInUpBig.less +34 -0
  33. data/vendor/assets/stylesheets/animate/fade/fadeOut.less +24 -0
  34. data/vendor/assets/stylesheets/animate/fade/fadeOutDown.less +34 -0
  35. data/vendor/assets/stylesheets/animate/fade/fadeOutDownBig.less +34 -0
  36. data/vendor/assets/stylesheets/animate/fade/fadeOutLeft.less +34 -0
  37. data/vendor/assets/stylesheets/animate/fade/fadeOutLeftBig.less +34 -0
  38. data/vendor/assets/stylesheets/animate/fade/fadeOutRight.less +34 -0
  39. data/vendor/assets/stylesheets/animate/fade/fadeOutRightBig.less +34 -0
  40. data/vendor/assets/stylesheets/animate/fade/fadeOutUp.less +34 -0
  41. data/vendor/assets/stylesheets/animate/fade/fadeOutUpBig.less +34 -0
  42. data/vendor/assets/stylesheets/animate/flash.less +24 -0
  43. data/vendor/assets/stylesheets/animate/flip/flip.less +86 -0
  44. data/vendor/assets/stylesheets/animate/flip/flipInX.less +59 -0
  45. data/vendor/assets/stylesheets/animate/flip/flipOutX.less +37 -0
  46. data/vendor/assets/stylesheets/animate/flip/flipOutY.less +37 -0
  47. data/vendor/assets/stylesheets/animate/flip/flipinY.less +59 -0
  48. data/vendor/assets/stylesheets/animate/hinge.less +103 -0
  49. data/vendor/assets/stylesheets/animate/lightSpeedIn.less +62 -0
  50. data/vendor/assets/stylesheets/animate/lightSpeedOut.less +36 -0
  51. data/vendor/assets/stylesheets/animate/pulse.less +43 -0
  52. data/vendor/assets/stylesheets/animate/roll/rollIn.less +36 -0
  53. data/vendor/assets/stylesheets/animate/roll/rollOut.less +36 -0
  54. data/vendor/assets/stylesheets/animate/rotate/rotateIn.less +44 -0
  55. data/vendor/assets/stylesheets/animate/rotate/rotateInDownLeft.less +44 -0
  56. data/vendor/assets/stylesheets/animate/rotate/rotateInDownRight.less +44 -0
  57. data/vendor/assets/stylesheets/animate/rotate/rotateInUpLeft.less +44 -0
  58. data/vendor/assets/stylesheets/animate/rotate/rotateInUpRight.less +44 -0
  59. data/vendor/assets/stylesheets/animate/rotate/rotateOut.less +44 -0
  60. data/vendor/assets/stylesheets/animate/rotate/rotateOutDownLeft.less +44 -0
  61. data/vendor/assets/stylesheets/animate/rotate/rotateOutDownRight.less +44 -0
  62. data/vendor/assets/stylesheets/animate/rotate/rotateOutUpLeft.less +44 -0
  63. data/vendor/assets/stylesheets/animate/rotate/rotateOutUpRight.less +44 -0
  64. data/vendor/assets/stylesheets/animate/rubberBand.less +63 -0
  65. data/vendor/assets/stylesheets/animate/shake.less +41 -0
  66. data/vendor/assets/stylesheets/animate/slide/slideInDown.less +32 -0
  67. data/vendor/assets/stylesheets/animate/slide/slideInLeft.less +32 -0
  68. data/vendor/assets/stylesheets/animate/slide/slideInRight.less +32 -0
  69. data/vendor/assets/stylesheets/animate/slide/slideInUp.less +34 -0
  70. data/vendor/assets/stylesheets/animate/slide/slideOutDown.less +32 -0
  71. data/vendor/assets/stylesheets/animate/slide/slideOutLeft.less +32 -0
  72. data/vendor/assets/stylesheets/animate/slide/slideOutRight.less +32 -0
  73. data/vendor/assets/stylesheets/animate/slide/slideOutUp.less +32 -0
  74. data/vendor/assets/stylesheets/animate/swing.less +66 -0
  75. data/vendor/assets/stylesheets/animate/tada.less +63 -0
  76. data/vendor/assets/stylesheets/animate/wobble.less +87 -0
  77. data/vendor/assets/stylesheets/animate/zoom/zoomIn.less +29 -0
  78. data/vendor/assets/stylesheets/animate/zoom/zoomInDown.less +42 -0
  79. data/vendor/assets/stylesheets/animate/zoom/zoomInLeft.less +42 -0
  80. data/vendor/assets/stylesheets/animate/zoom/zoomInRight.less +42 -0
  81. data/vendor/assets/stylesheets/animate/zoom/zoomInUp.less +42 -0
  82. data/vendor/assets/stylesheets/animate/zoom/zoomOut.less +42 -0
  83. data/vendor/assets/stylesheets/animate/zoom/zoomOutDown.less +43 -0
  84. data/vendor/assets/stylesheets/animate/zoom/zoomOutLeft.less +43 -0
  85. data/vendor/assets/stylesheets/animate/zoom/zoomOutRight.less +43 -0
  86. data/vendor/assets/stylesheets/animate/zoom/zoomOutUp.less +43 -0
  87. data/vendor/assets/stylesheets/bootstrap-additions.less +2 -1
  88. data/vendor/assets/stylesheets/dist/railsstrap.css +3407 -0
  89. data/vendor/assets/stylesheets/railsstrap.less +78 -0
  90. metadata +107 -2
@@ -0,0 +1,34 @@
1
+ @-webkit-keyframes fadeOutUp {
2
+ 0% {
3
+ opacity: 1;
4
+ -webkit-transform: translateY(0);
5
+ transform: translateY(0);
6
+ }
7
+
8
+ 100% {
9
+ opacity: 0;
10
+ -webkit-transform: translateY(-20px);
11
+ transform: translateY(-20px);
12
+ }
13
+ }
14
+
15
+ @keyframes fadeOutUp {
16
+ 0% {
17
+ opacity: 1;
18
+ -webkit-transform: translateY(0);
19
+ -ms-transform: translateY(0);
20
+ transform: translateY(0);
21
+ }
22
+
23
+ 100% {
24
+ opacity: 0;
25
+ -webkit-transform: translateY(-20px);
26
+ -ms-transform: translateY(-20px);
27
+ transform: translateY(-20px);
28
+ }
29
+ }
30
+
31
+ .fadeOutUp {
32
+ -webkit-animation-name: fadeOutUp;
33
+ animation-name: fadeOutUp;
34
+ }
@@ -0,0 +1,34 @@
1
+ @-webkit-keyframes fadeOutUpBig {
2
+ 0% {
3
+ opacity: 1;
4
+ -webkit-transform: translateY(0);
5
+ transform: translateY(0);
6
+ }
7
+
8
+ 100% {
9
+ opacity: 0;
10
+ -webkit-transform: translateY(-2000px);
11
+ transform: translateY(-2000px);
12
+ }
13
+ }
14
+
15
+ @keyframes fadeOutUpBig {
16
+ 0% {
17
+ opacity: 1;
18
+ -webkit-transform: translateY(0);
19
+ -ms-transform: translateY(0);
20
+ transform: translateY(0);
21
+ }
22
+
23
+ 100% {
24
+ opacity: 0;
25
+ -webkit-transform: translateY(-2000px);
26
+ -ms-transform: translateY(-2000px);
27
+ transform: translateY(-2000px);
28
+ }
29
+ }
30
+
31
+ .fadeOutUpBig {
32
+ -webkit-animation-name: fadeOutUpBig;
33
+ animation-name: fadeOutUpBig;
34
+ }
@@ -0,0 +1,24 @@
1
+ @-webkit-keyframes flash {
2
+ 0%, 50%, 100% {
3
+ opacity: 1;
4
+ }
5
+
6
+ 25%, 75% {
7
+ opacity: 0;
8
+ }
9
+ }
10
+
11
+ @keyframes flash {
12
+ 0%, 50%, 100% {
13
+ opacity: 1;
14
+ }
15
+
16
+ 25%, 75% {
17
+ opacity: 0;
18
+ }
19
+ }
20
+
21
+ .flash {
22
+ -webkit-animation-name: flash;
23
+ animation-name: flash;
24
+ }
@@ -0,0 +1,86 @@
1
+ @-webkit-keyframes flip {
2
+ 0% {
3
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
4
+ transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
5
+ -webkit-animation-timing-function: ease-out;
6
+ animation-timing-function: ease-out;
7
+ }
8
+
9
+ 40% {
10
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
11
+ transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
12
+ -webkit-animation-timing-function: ease-out;
13
+ animation-timing-function: ease-out;
14
+ }
15
+
16
+ 50% {
17
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
18
+ transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
19
+ -webkit-animation-timing-function: ease-in;
20
+ animation-timing-function: ease-in;
21
+ }
22
+
23
+ 80% {
24
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
25
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
26
+ -webkit-animation-timing-function: ease-in;
27
+ animation-timing-function: ease-in;
28
+ }
29
+
30
+ 100% {
31
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
32
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
33
+ -webkit-animation-timing-function: ease-in;
34
+ animation-timing-function: ease-in;
35
+ }
36
+ }
37
+
38
+ @keyframes flip {
39
+ 0% {
40
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
41
+ -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
42
+ transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
43
+ -webkit-animation-timing-function: ease-out;
44
+ animation-timing-function: ease-out;
45
+ }
46
+
47
+ 40% {
48
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
49
+ -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
50
+ transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
51
+ -webkit-animation-timing-function: ease-out;
52
+ animation-timing-function: ease-out;
53
+ }
54
+
55
+ 50% {
56
+ -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
57
+ -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
58
+ transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
59
+ -webkit-animation-timing-function: ease-in;
60
+ animation-timing-function: ease-in;
61
+ }
62
+
63
+ 80% {
64
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
65
+ -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
66
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
67
+ -webkit-animation-timing-function: ease-in;
68
+ animation-timing-function: ease-in;
69
+ }
70
+
71
+ 100% {
72
+ -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
73
+ -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
74
+ transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
75
+ -webkit-animation-timing-function: ease-in;
76
+ animation-timing-function: ease-in;
77
+ }
78
+ }
79
+
80
+ .animated.flip {
81
+ -webkit-backface-visibility: visible;
82
+ -ms-backface-visibility: visible;
83
+ backface-visibility: visible;
84
+ -webkit-animation-name: flip;
85
+ animation-name: flip;
86
+ }
@@ -0,0 +1,59 @@
1
+ @-webkit-keyframes flipInX {
2
+ 0% {
3
+ -webkit-transform: perspective(400px) rotateX(90deg);
4
+ transform: perspective(400px) rotateX(90deg);
5
+ opacity: 0;
6
+ }
7
+
8
+ 40% {
9
+ -webkit-transform: perspective(400px) rotateX(-10deg);
10
+ transform: perspective(400px) rotateX(-10deg);
11
+ }
12
+
13
+ 70% {
14
+ -webkit-transform: perspective(400px) rotateX(10deg);
15
+ transform: perspective(400px) rotateX(10deg);
16
+ }
17
+
18
+ 100% {
19
+ -webkit-transform: perspective(400px) rotateX(0deg);
20
+ transform: perspective(400px) rotateX(0deg);
21
+ opacity: 1;
22
+ }
23
+ }
24
+
25
+ @keyframes flipInX {
26
+ 0% {
27
+ -webkit-transform: perspective(400px) rotateX(90deg);
28
+ -ms-transform: perspective(400px) rotateX(90deg);
29
+ transform: perspective(400px) rotateX(90deg);
30
+ opacity: 0;
31
+ }
32
+
33
+ 40% {
34
+ -webkit-transform: perspective(400px) rotateX(-10deg);
35
+ -ms-transform: perspective(400px) rotateX(-10deg);
36
+ transform: perspective(400px) rotateX(-10deg);
37
+ }
38
+
39
+ 70% {
40
+ -webkit-transform: perspective(400px) rotateX(10deg);
41
+ -ms-transform: perspective(400px) rotateX(10deg);
42
+ transform: perspective(400px) rotateX(10deg);
43
+ }
44
+
45
+ 100% {
46
+ -webkit-transform: perspective(400px) rotateX(0deg);
47
+ -ms-transform: perspective(400px) rotateX(0deg);
48
+ transform: perspective(400px) rotateX(0deg);
49
+ opacity: 1;
50
+ }
51
+ }
52
+
53
+ .flipInX {
54
+ -webkit-backface-visibility: visible !important;
55
+ -ms-backface-visibility: visible !important;
56
+ backface-visibility: visible !important;
57
+ -webkit-animation-name: flipInX;
58
+ animation-name: flipInX;
59
+ }
@@ -0,0 +1,37 @@
1
+ @-webkit-keyframes flipOutX {
2
+ 0% {
3
+ -webkit-transform: perspective(400px) rotateX(0deg);
4
+ transform: perspective(400px) rotateX(0deg);
5
+ opacity: 1;
6
+ }
7
+
8
+ 100% {
9
+ -webkit-transform: perspective(400px) rotateX(90deg);
10
+ transform: perspective(400px) rotateX(90deg);
11
+ opacity: 0;
12
+ }
13
+ }
14
+
15
+ @keyframes flipOutX {
16
+ 0% {
17
+ -webkit-transform: perspective(400px) rotateX(0deg);
18
+ -ms-transform: perspective(400px) rotateX(0deg);
19
+ transform: perspective(400px) rotateX(0deg);
20
+ opacity: 1;
21
+ }
22
+
23
+ 100% {
24
+ -webkit-transform: perspective(400px) rotateX(90deg);
25
+ -ms-transform: perspective(400px) rotateX(90deg);
26
+ transform: perspective(400px) rotateX(90deg);
27
+ opacity: 0;
28
+ }
29
+ }
30
+
31
+ .flipOutX {
32
+ -webkit-animation-name: flipOutX;
33
+ animation-name: flipOutX;
34
+ -webkit-backface-visibility: visible !important;
35
+ -ms-backface-visibility: visible !important;
36
+ backface-visibility: visible !important;
37
+ }
@@ -0,0 +1,37 @@
1
+ @-webkit-keyframes flipOutY {
2
+ 0% {
3
+ -webkit-transform: perspective(400px) rotateY(0deg);
4
+ transform: perspective(400px) rotateY(0deg);
5
+ opacity: 1;
6
+ }
7
+
8
+ 100% {
9
+ -webkit-transform: perspective(400px) rotateY(90deg);
10
+ transform: perspective(400px) rotateY(90deg);
11
+ opacity: 0;
12
+ }
13
+ }
14
+
15
+ @keyframes flipOutY {
16
+ 0% {
17
+ -webkit-transform: perspective(400px) rotateY(0deg);
18
+ -ms-transform: perspective(400px) rotateY(0deg);
19
+ transform: perspective(400px) rotateY(0deg);
20
+ opacity: 1;
21
+ }
22
+
23
+ 100% {
24
+ -webkit-transform: perspective(400px) rotateY(90deg);
25
+ -ms-transform: perspective(400px) rotateY(90deg);
26
+ transform: perspective(400px) rotateY(90deg);
27
+ opacity: 0;
28
+ }
29
+ }
30
+
31
+ .flipOutY {
32
+ -webkit-backface-visibility: visible !important;
33
+ -ms-backface-visibility: visible !important;
34
+ backface-visibility: visible !important;
35
+ -webkit-animation-name: flipOutY;
36
+ animation-name: flipOutY;
37
+ }
@@ -0,0 +1,59 @@
1
+ @-webkit-keyframes flipInY {
2
+ 0% {
3
+ -webkit-transform: perspective(400px) rotateY(90deg);
4
+ transform: perspective(400px) rotateY(90deg);
5
+ opacity: 0;
6
+ }
7
+
8
+ 40% {
9
+ -webkit-transform: perspective(400px) rotateY(-10deg);
10
+ transform: perspective(400px) rotateY(-10deg);
11
+ }
12
+
13
+ 70% {
14
+ -webkit-transform: perspective(400px) rotateY(10deg);
15
+ transform: perspective(400px) rotateY(10deg);
16
+ }
17
+
18
+ 100% {
19
+ -webkit-transform: perspective(400px) rotateY(0deg);
20
+ transform: perspective(400px) rotateY(0deg);
21
+ opacity: 1;
22
+ }
23
+ }
24
+
25
+ @keyframes flipInY {
26
+ 0% {
27
+ -webkit-transform: perspective(400px) rotateY(90deg);
28
+ -ms-transform: perspective(400px) rotateY(90deg);
29
+ transform: perspective(400px) rotateY(90deg);
30
+ opacity: 0;
31
+ }
32
+
33
+ 40% {
34
+ -webkit-transform: perspective(400px) rotateY(-10deg);
35
+ -ms-transform: perspective(400px) rotateY(-10deg);
36
+ transform: perspective(400px) rotateY(-10deg);
37
+ }
38
+
39
+ 70% {
40
+ -webkit-transform: perspective(400px) rotateY(10deg);
41
+ -ms-transform: perspective(400px) rotateY(10deg);
42
+ transform: perspective(400px) rotateY(10deg);
43
+ }
44
+
45
+ 100% {
46
+ -webkit-transform: perspective(400px) rotateY(0deg);
47
+ -ms-transform: perspective(400px) rotateY(0deg);
48
+ transform: perspective(400px) rotateY(0deg);
49
+ opacity: 1;
50
+ }
51
+ }
52
+
53
+ .flipInY {
54
+ -webkit-backface-visibility: visible !important;
55
+ -ms-backface-visibility: visible !important;
56
+ backface-visibility: visible !important;
57
+ -webkit-animation-name: flipInY;
58
+ animation-name: flipInY;
59
+ }
@@ -0,0 +1,103 @@
1
+ @-webkit-keyframes hinge {
2
+ 0% {
3
+ -webkit-transform: rotate(0);
4
+ transform: rotate(0);
5
+ -webkit-transform-origin: top left;
6
+ transform-origin: top left;
7
+ -webkit-animation-timing-function: ease-in-out;
8
+ animation-timing-function: ease-in-out;
9
+ }
10
+
11
+ 20%, 60% {
12
+ -webkit-transform: rotate(80deg);
13
+ transform: rotate(80deg);
14
+ -webkit-transform-origin: top left;
15
+ transform-origin: top left;
16
+ -webkit-animation-timing-function: ease-in-out;
17
+ animation-timing-function: ease-in-out;
18
+ }
19
+
20
+ 40% {
21
+ -webkit-transform: rotate(60deg);
22
+ transform: rotate(60deg);
23
+ -webkit-transform-origin: top left;
24
+ transform-origin: top left;
25
+ -webkit-animation-timing-function: ease-in-out;
26
+ animation-timing-function: ease-in-out;
27
+ }
28
+
29
+ 80% {
30
+ -webkit-transform: rotate(60deg) translateY(0);
31
+ transform: rotate(60deg) translateY(0);
32
+ -webkit-transform-origin: top left;
33
+ transform-origin: top left;
34
+ -webkit-animation-timing-function: ease-in-out;
35
+ animation-timing-function: ease-in-out;
36
+ opacity: 1;
37
+ }
38
+
39
+ 100% {
40
+ -webkit-transform: translateY(700px);
41
+ transform: translateY(700px);
42
+ opacity: 0;
43
+ }
44
+ }
45
+
46
+ @keyframes hinge {
47
+ 0% {
48
+ -webkit-transform: rotate(0);
49
+ -ms-transform: rotate(0);
50
+ transform: rotate(0);
51
+ -webkit-transform-origin: top left;
52
+ -ms-transform-origin: top left;
53
+ transform-origin: top left;
54
+ -webkit-animation-timing-function: ease-in-out;
55
+ animation-timing-function: ease-in-out;
56
+ }
57
+
58
+ 20%, 60% {
59
+ -webkit-transform: rotate(80deg);
60
+ -ms-transform: rotate(80deg);
61
+ transform: rotate(80deg);
62
+ -webkit-transform-origin: top left;
63
+ -ms-transform-origin: top left;
64
+ transform-origin: top left;
65
+ -webkit-animation-timing-function: ease-in-out;
66
+ animation-timing-function: ease-in-out;
67
+ }
68
+
69
+ 40% {
70
+ -webkit-transform: rotate(60deg);
71
+ -ms-transform: rotate(60deg);
72
+ transform: rotate(60deg);
73
+ -webkit-transform-origin: top left;
74
+ -ms-transform-origin: top left;
75
+ transform-origin: top left;
76
+ -webkit-animation-timing-function: ease-in-out;
77
+ animation-timing-function: ease-in-out;
78
+ }
79
+
80
+ 80% {
81
+ -webkit-transform: rotate(60deg) translateY(0);
82
+ -ms-transform: rotate(60deg) translateY(0);
83
+ transform: rotate(60deg) translateY(0);
84
+ -webkit-transform-origin: top left;
85
+ -ms-transform-origin: top left;
86
+ transform-origin: top left;
87
+ -webkit-animation-timing-function: ease-in-out;
88
+ animation-timing-function: ease-in-out;
89
+ opacity: 1;
90
+ }
91
+
92
+ 100% {
93
+ -webkit-transform: translateY(700px);
94
+ -ms-transform: translateY(700px);
95
+ transform: translateY(700px);
96
+ opacity: 0;
97
+ }
98
+ }
99
+
100
+ .hinge {
101
+ -webkit-animation-name: hinge;
102
+ animation-name: hinge;
103
+ }