<style>body { /*background: #333;*/ overflow: hidden; } /* KEYFRAMES */ @-webkit-keyframes animateBubble { 0% { margin-top: 50px; } 100% { margin-top: 700px; } } @-moz-keyframes animateBubble { 0% { margin-top: 50px; } 100% { margin-top: 700px; } } @keyframes animateBubble { 0% { margin-top: 50px; } 100% { margin-top: 700px; } } @-webkit-keyframes sideWays { 0% { margin-left: 50px; } 100% { margin-left: 850px; } } @-moz-keyframes sideWays { 0% { margin-left: 50px; } 100% { margin-left: 850px; } } @keyframes sideWays { 0% { margin-left: 50px; } 100% { margin-left: 850px; } } /* ANIMATIONS */ .x1 { -webkit-animation: animateBubble 100s linear infinite, sideWays 20s ease-in-out infinite alternate; -moz-animation: animateBubble 100s linear infinite, sideWays 20s ease-in-out infinite alternate; animation: animateBubble 10s ease-in reverse, sideWays 10s ease reverse; left: 100%; top: 100%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } /* .x2 { -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 10%; top: 80%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } .x3 { -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate; left: 80%; top: 40%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); } .x4 { -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; -moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate; left: 40%; top: 0; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .x5 { -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate; left: 60%; top: 50%; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); } */ /* OBJECTS */ /*img { -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1); position: absolute; } */</style><div class="x1"> <img src="https://beetlechoice.com/wp-content/uploads/2018/01/logo-beetlechoice-100.png" alt="scarabée-1" height: 20px width: 20px> </div><script></script>