Охрана  Здоровья

body {margin:0; height:100%;} .sky { height:100%; background: no-repeat #007fd5; position:relative; overflow:hidden; -webkit-animation:sky_background 50s ease-out infinite; -moz-animation:sky_background 50s ease-out infinite; -o-animation:sky_background 50s ease-out infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } .moon { background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/moon.png"); position:absolute; left:0; height:100%; width:300%; -webkit-animation:moon 50s linear infinite; -moz-animation:moon 50s linear infinite; -o-animation:moon 50s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } .clouds_one { background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_one.png"); position:absolute; left:0; top:0; height:100%; width:300%; -webkit-animation:cloud_one 50s linear infinite; -moz-animation:cloud_one 50s linear infinite; -o-animation:cloud_one 50s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } .clouds_two { background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_two.png"); position:absolute; left:0; top:0; height:100%; width:300%; -webkit-animation:cloud_two 75s linear infinite; -moz-animation:cloud_two 75s linear infinite; -o-animation:cloud_two 75s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0); } .clouds_three { background: no-repeat url("http://megascripts.ru/demo/oblaka_na_css/cloud_three.png"); position:absolute; left:0; top:0; height:100%; width:300%; -webkit-animation:cloud_three 100s linear infinite; -moz-animation:cloud_three 100s linear infinite; -o-animation:cloud_three 100s linear infinite; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -o-transform:translate3d(0,0,0) ; } @-webkit-keyframes sky_background { 0% { background: no-repeat #007fd5; color:#007fd5 ; } 50% { background: no-repeat #000; color:#a3d9ff ; } 100% { background: no-repeat #007fd5; color:#007fd5 ; } } @-webkit-keyframes moon { 0% { opacity: 0; left:-200% ; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left:0% ; bottom:250px; -webkit-transform: scale(1);} 100% { opacity: 0; bottom:500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5);} } @-webkit-keyframes cloud_one { 0% { left:0 ; } 100% { left:-200% ; } } @-webkit-keyframes cloud_two { 0% { left:0 ; } 100% { left:-200% ; } } @-webkit-keyframes cloud_three { 0% { left:0 ; } 100% { left:-200% ; } } @-moz-keyframes sky_background { 0% { background: no-repeat #007fd5; color:#007fd5 ; } 50% { background: no-repeat #000; color:#a3d9ff ; } 100% { background: no-repeat #007fd5; color:#007fd5 ; } } @-moz-keyframes moon { 0% { opacity: 0; left:-200% ; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } 50% { opacity: 1; -moz-transform: scale(1); left:0% ; bottom:250px; -webkit-transform: scale(1); } 100% { opacity: 0; bottom:500px; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); } } @-moz-keyframes cloud_one { 0% { left:0 ; } 100% { left:-200% ; } } @-moz-keyframes cloud_two { 0% { left:0 ; } 100% { left:-200% ; } } @-moz-keyframes cloud_three {0% {left:0; } 100% { left:-200%;} }