div#header, div#mbody, div#contact, div#horizon { -webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ -webkit-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -moz-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -ms-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); -o-transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */ } @keyframes spin { 0% { transform: rotate( 0deg ); } 25% { transform: rotate( 90deg ); } 50% { transform: rotate( 180deg ); } 75% { transform: rotate( 270deg ); } 100% { transform: rotate( 360deg ); } } @keyframes aspin { 0% { transform: rotate( 0deg ); } 25% { transform: rotate( -90deg ); } 50% { transform: rotate( -180deg ); } 75% { transform: rotate( -270deg ); } 100% { transform: rotate( -360deg ); } } .spin { animation-duration: 60s; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: aspin; } .cw { animation-name: spin; } .mbody { padding: 0 0.25em; box-sizing: border-box; background-color: rgba( 255, 255, 255, 0.5 ); } #menu { padding: 0 0.5em; background-color: rgba( 255, 255, 255, 0.5 ); } .begin-wrapper { background-image: linear-gradient( rgba(0, 0, 0, 0.05) .1em, transparent .1em ); background-image: -moz-linear-gradient( rgba(0, 0, 0, 0.05) .1em, transparent .1em ); background-size: 100% 1.2em; }