Question

I have a cloud which moves from just inside the screen to off the screen with a CSS3 animation. When the cloud is off the screen, the screen scrolls horizontally which is not ideal. I can hide the scrollbar with CSS, but I’d like to prevent the scroll.

#c-2 {
background:url(clouds.png) no-repeat;
width:161px;
height:94px;
position:absolute;
top:40%;
right:0%;
animation:CloudB 20s 1s infinite alternate ease-in-out;
-moz-animation:CloudB 20s 1s infinite alternate ease-in-out;
-webkit-animation:CloudB 20s 1s infinite alternate ease-in-out;
-o-animation:CloudB 20s 1s infinite alternate ease-in-out;
}

@keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-moz-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-webkit-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

@-o-keyframes CloudB {
    0%   { right:0%; top:40%; }
    100% { right:-10%; top:40%; }
}

http://energycenter.herokuapp.com/

Answer 1

Try this – http://jsfiddle.net/m3af2/

body {
    background-color: #99CCE8;
    margin: 0;
    line-height: 1;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    position: relative;
}