mirror of
https://github.com/medialab-prado/datamad2017.git
synced 2024-12-29 14:11:21 +01:00
39 lines
2.9 KiB
SCSS
39 lines
2.9 KiB
SCSS
|
@if $use-hinge == true {
|
||
|
|
|
||
|
|
@-webkit-keyframes hinge {
|
||
|
|
0% { -webkit-transform: rotate(0); -webkit-transform-origin: $hinge-origin; -webkit-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
20%, 60% { -webkit-transform: rotate($hinge-degrees-max); -webkit-transform-origin: $hinge-origin; -webkit-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
40% { -webkit-transform: rotate($base-degrees * 2); -webkit-transform-origin: $hinge-origin; -webkit-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
80% { -webkit-transform: rotate($base-degrees * 2) translateY(0); opacity: 1; -webkit-transform-origin: $hinge-origin; -webkit-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
100% { -webkit-transform: translateY($hinge-translate); opacity: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@-moz-keyframes hinge {
|
||
|
|
0% { -moz-transform: rotate(0); -moz-transform-origin: $hinge-origin; -moz-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
20%, 60% { -moz-transform: rotate($hinge-degrees-max); -moz-transform-origin: $hinge-origin; -moz-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
40% { -moz-transform: rotate($base-degrees * 2); -moz-transform-origin: $hinge-origin; -moz-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
80% { -moz-transform: rotate($base-degrees * 2) translateY(0); opacity: 1; -moz-transform-origin: $hinge-origin; -moz-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
100% { -moz-transform: translateY($hinge-translate); opacity: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@-o-keyframes hinge {
|
||
|
|
0% { -o-transform: rotate(0); -o-transform-origin: $hinge-origin; -o-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
20%, 60% { -o-transform: rotate($hinge-degrees-max); -o-transform-origin: $hinge-origin; -o-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
40% { -o-transform: rotate($base-degrees * 2); -o-transform-origin: $hinge-origin; -o-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
80% { -o-transform: rotate($base-degrees * 2) translateY(0); opacity: 1; -o-transform-origin: $hinge-origin; -o-animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
100% { -o-transform: translateY($hinge-translate); opacity: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes hinge {
|
||
|
|
0% { transform: rotate(0); transform-origin: $hinge-origin; animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
20%, 60% { transform: rotate($hinge-degrees-max); transform-origin: $hinge-origin; animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
40% { transform: rotate($base-degrees * 2); transform-origin: $hinge-origin; animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
80% { transform: rotate($base-degrees * 2) translateY(0); opacity: 1; transform-origin: $hinge-origin; animation-timing-function: $base-timing-function-in-out; }
|
||
|
|
100% { transform: translateY($hinge-translate); opacity: 0; }
|
||
|
|
}
|
||
|
|
|
||
|
|
.hinge {
|
||
|
|
@include animate-prefixer(animation-name, hinge);
|
||
|
|
}
|
||
|
|
}
|