anim { display: inline-block; overflow: hidden; position: relative; } .smoke .cloud-0 { background: red; opacity: 0; position: absolute; z-index: 19; width: 100%; height: 100%; top: 0; animation: cloudtransparency 10s 1; } .smoke .cloud-1 { background: transparent url(https://manager.qualifio.com/library/externalbe_0/images/2020/clouds/cloud1-3.png) no-repeat 0 0; width: 1000px; height: 417px; position: absolute; z-index: 20; top: -25%; left: -250%; animation: cloudleft 10s 1; } .smoke .cloud-2 { background: transparent url(https://manager.qualifio.com/library/externalbe_0/images/2020/clouds/cloud2-3.png) no-repeat 0 0; width: 1000px; height: 266px; position: absolute; z-index: 21; top: -8%; right: -250%; animation: cloudright 10s 1; } .smoke .cloud-3 { background: transparent url(https://manager.qualifio.com/library/externalbe_0/images/2020/clouds/cloud3-3.png) no-repeat 0 0; width: 1000px; height: 266px; position: absolute; z-index: 22; top: 64%; left: -250%; animation: cloudleft 10s 1; } .smoke .cloud-4 { background: transparent url(https://manager.qualifio.com/library/externalbe_0/images/2020/clouds/cloud4-3.png) no-repeat 0 0; width: 1000px; height: 387px; position: absolute; z-index: 23; top: 40%; right: -250%; animation: cloudright 10s 1; } .smoke .cloud-5 { background: transparent url(https://manager.qualifio.com/library/externalbe_0/images/2020/clouds/cloud5-3.png) no-repeat 0 0; width: 1000px; height: 234px; position: absolute; z-index: 24; top: -15%; left: -250%; animation: cloudleft 10s 1; } .smoke .cloud-6 { background: transparent url(https://manager.qualifio.com/library/externalbe_0/images/2020/clouds/cloud6-3.png) no-repeat 0 0; width: 1000px; height: 249px; position: absolute; z-index: 25; top: 10%; left: -250%; animation: cloudleft2 10s 1; } .smoke .cloud-7 { background: transparent url(https://manager.qualifio.com/library/externalbe_0/images/2020/clouds/cloud1-3.png) no-repeat 0 0; width: 1000px; height: 417px; position: absolute; z-index: 25; right: -6%; left: -250%; animation: cloudright 10s 1; } @keyframes cloudleft { 0% { left: 8%; } 100% { left: -250%; } } @keyframes cloudright { 0% { right: 8%; } 100% { right: -250%; } } @keyframes cloudleft2 { 0% { left: -8%; opacity: 1; } 100% { left: -250%; opacity: 0; } } @keyframes cloudtransparency { 0% { opacity: 1; } 100% { opacity: 0; } }