diff --git a/less/keyframes.less b/less/keyframes.less index 0a5c67f..61ce020 100644 --- a/less/keyframes.less +++ b/less/keyframes.less @@ -66,4 +66,87 @@ @keyframes topic-reply-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } -} \ No newline at end of file +} + + + +// originally from http://daneden.github.io/animate.css/ +@-webkit-keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(.97, .97, .97); + transform: scale3d(.97, .97, .97); + } + + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} + +@keyframes bounceIn { + 0%, 20%, 40%, 60%, 80%, 100% { + -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); + } + + 0% { + opacity: 0; + -webkit-transform: scale3d(.3, .3, .3); + transform: scale3d(.3, .3, .3); + } + + 20% { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); + } + + 40% { + -webkit-transform: scale3d(.9, .9, .9); + transform: scale3d(.9, .9, .9); + } + + 60% { + opacity: 1; + -webkit-transform: scale3d(1.03, 1.03, 1.03); + transform: scale3d(1.03, 1.03, 1.03); + } + + 80% { + -webkit-transform: scale3d(.97, .97, .97); + transform: scale3d(.97, .97, .97); + } + + 100% { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + } +} diff --git a/modules/taskbar.less b/modules/taskbar.less index d4ad8e0..7eeb88f 100644 --- a/modules/taskbar.less +++ b/modules/taskbar.less @@ -31,10 +31,12 @@ float: left; &.new a { - -webkit-animation: taskbar-active 3s infinite; - -moz-animation: taskbar-active 3s infinite; - -o-animation: taskbar-active 3s infinite; - animation: taskbar-active 3s infinite; + -webkit-animation-name: bounceIn; + animation-name: bounceIn; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } a { @@ -56,15 +58,13 @@ margin-right: 1em; } - &.pulse { - -webkit-animation: pulsate 2500ms linear; - -webkit-animation-iteration-count: infinite; - } - - @-webkit-keyframes pulsate { - 0% { background: none; } - 50% { background: #e5e5e5; } - 100% { background: none; } + &.pulse a { + -webkit-animation-name: bounceIn; + animation-name: bounceIn; + -webkit-animation-duration: 1s; + animation-duration: 1s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } &.taskbar-composer {