I am creating a demo application that randomly selects a venue when a button is clicked. Once the button is clicked I want to have the venues scroll through with a slot machine spinning animation using CSS3 and jQuery before a venue is selected.
I thought about using -webkit-keyframes
and changing the background position, but it's not the ideal animation I would like.
@-webkit-keyframes spin{
0% {
background-position: 0, 0 0;
-webkit-transform: rotateX(0deg);
}
100% {
background-position: 0, 0 -640px;
-webkit-transform: rotateX(360deg);
}
}
.rotating{
-webkit-animation: spin .5s infinite linear;
-webkit-transition: background-position .7s;
}
Can anyone give any insight on how this can be achieved? Here is what I have so far. Any help is appreciated.
Thank You