#backtotop position: fixed; right: 50px; bottom: 50px; display: block; visibility: hidden; width: 42px; height: 43px; background: url(images/backtotop.png) no-repeat 50% 0; opacity: 0; -webkit-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -webkit-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335); -moz-transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), -moz-transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335); transition: visibility 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), opacity 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335), transform 0.6s cubic-bezier(0.6, 0.04, 0.98, 0.335); @media mq-mobile right: 12px; bottom: 20px; #backtotop i { display: block; margin-top: 48px; height: 14px; background: url(images/backtotop.png) no-repeat 50% -20px; opacity: .5; -webkit-transition: -webkit-transform .2s; -moz-transition: -moz-transform .2s; transition: transform .2s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; } #backtotop.show { visibility: visible; opacity: 0.50; } #backtotop.launch { background-position: 50% -44px; opacity: 0; -webkit-transform: translateY(-500px); -moz-transform: translateY(-500px); -ms-transform: translateY(-500px); transform: translateY(-500px); pointer-events: none; } #backtotop.launch i { background-position: 50% 100%; -webkit-transform: scale(1.4, 3.2); -moz-transform: scale(1.4, 3.2); transform: scale(1.4, 3.2); }