diff options
Diffstat (limited to 'app/assets/stylesheets/framework/animations.scss')
-rw-r--r-- | app/assets/stylesheets/framework/animations.scss | 67 |
1 files changed, 23 insertions, 44 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 1fec61bdba1..1e9a45c19b8 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -8,65 +8,44 @@ // Copyright (c) 2016 Daniel Eden .animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; -} - -.animated.infinite { - -webkit-animation-iteration-count: infinite; - animation-iteration-count: infinite; -} + @include webkit-prefix(animation-duration, 1s); + @include webkit-prefix(animation-fill-mode, both); -.animated.hinge { - -webkit-animation-duration: 2s; - animation-duration: 2s; -} + &.infinite { + @include webkit-prefix(animation-iteration-count, infinite); + } -.animated.flipOutX, -.animated.flipOutY, -.animated.bounceIn, -.animated.bounceOut { - -webkit-animation-duration: .75s; - animation-duration: .75s; -} + &.once { + @include webkit-prefix(animation-iteration-count, 1); + } -@-webkit-keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); + &.hinge { + @include webkit-prefix(animation-duration, 2s); } - 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); + &.flipOutX, + &.flipOutY, + &.bounceIn, + &.bounceOut { + @include webkit-prefix(animation-duration, .75s); } - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); + &.short { + @include webkit-prefix(animation-duration, 321ms); + @include webkit-prefix(animation-fill-mode, none); } } -@keyframes pulse { - from { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); +@include keyframes(pulse) { + from, to { + @include webkit-prefix(transform, scale3d(1, 1, 1)); } 50% { - -webkit-transform: scale3d(1.05, 1.05, 1.05); - transform: scale3d(1.05, 1.05, 1.05); - } - - to { - -webkit-transform: scale3d(1, 1, 1); - transform: scale3d(1, 1, 1); + @include webkit-prefix(transform, scale3d(1.05, 1.05, 1.05)); } } .pulse { - -webkit-animation-name: pulse; - animation-name: pulse; + @include webkit-prefix(animation-name, pulse); } |