Autospin image in CSS

Question

I replicated this: How to spin an image horizontally with CSS

It works perfect, but how do I get the images to spin automatically upon loading the page instead of having to click the text that says Loading?

$(".button.loading").on('click', function(){
    $("#imageLoading").addClass("imageRotateHorizontal");
});

$(".button.stop").on('click', function(){
    $("#imageLoading").removeClass("imageRotateHorizontal");
});

.imageRotateHorizontal{
    -moz-animation: spinHorizontal .8s infinite linear;
    -o-animation: spinHorizontal .8s infinite linear;    
    -webkit-animation: spinHorizontal .8s infinite linear;
    animation: spinHorizontal .8s infinite linear;
}

@-moz-keyframes spinHorizontal {
    0% {
        -moz-transform: rotateY(0deg);
    }

    100% {
        -moz-transform: rotateY(360deg);
    }
}

@keyframes spinHorizontal {
 0% { 
        transform: rotateY(0deg); 
 }
    100% {
        transform: rotateY(360deg);
    }
}


@-ms-keyframes spinHorizontal {
 0% { 
        -ms-transform: rotateY(0deg); 
 }
    100% {
        -ms-transform: rotateY(360deg);
    }
}

@-o-keyframes spinHorizontal {
 0% { 
        -o-transform: rotateY(0deg); 
 }
 100% { 
        -o-transform: rotateY(360deg); 
 }
}

@-webkit-keyframes spinHorizontal {
 0% { 
        -webkit-transform: rotateY(0deg); 
 }
 100% { 
        -webkit-transform: rotateY(360deg); 
 }
}


.button{
   cursor: pointer;     
}

<div style="width: 200px">
    <div style="float:left">
        <div class='button loading'>Loading</div>
        <div class='button stop'>Stop</div>
    </div>
    <div style="float:right">
        <img id='imageLoading' src="http://showroomirisv07.cloudapp.net/Iris.Platform.Resources/Images/Iris/IRIS_color_24x24.png" />
    </div>
<div>

It would probably be a better idea to edit your question to add the HTML you've commented here. — Jon, May 06 '15 at 20:01

score 1 · Answer 1 · answered May 06 '15 at 20:01

1

You are making the image spin by adding a class to it

$("#imageLoading").addClass("imageRotateHorizontal");

Simply add that class to your HTML from the beginning:

        <img id='imageLoading' src="..." class="imageRotateHorizontal" />

answered May 06 '15 at 20:01

Josef Engelfrost

2,955
1
29
38

Autospin image in CSS

1 Answers1