CSS Animation on Focus/Active not working - html

Question

I have a webpage which has some css that makes an image appear from the left and move in slightly to the right. However this animation is done as soon as the page is loaded so it does not appear to move at all. I would like the animation to fire when the user scrolls down to the portion of the page where the image is located. How would I go about doing this? Here is my current code for the animation:
#-webkit-keyframes move
{
from {
left: -100%;
}
to {
left: -10%;
}
}
#keyframes move
{
from {
left: -100%;
}
to {
left: -10%;
}
}
.rotator{
text-decoration: none;
padding-right: 20px;
left: -10%;
position: absolute;
-webkit-animation: move 5s;
animation: move 5s;
}
.rotator img {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
border-radius:60px;
transition-duration: 1s;
}
and here is the html i put on the page:
<a class="rotator"><img src="img/lc.png" /></a>
Thanks in advance!

Answer 1

You could use JQuery to measure if the user has reached a certain point on the website. If so, then you should add a class which contains the animation.
JQuery:
$(document).scroll(function() {
if ($(document).scrollTop() == 200) {
$("#block").addClass("animate");
}
});
In the line if ($(document).scrollTop() == 200) is 200 equal to the y-coördinate of the element which should animate.
Example:
$(document).scroll(function() {
if ($(document).scrollTop() == 200) {
$("#block").addClass("animate");
}
});
body {
height: 2000px;
margin: 0px;
}
#block {
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
border: 2px solid red;
margin: 200px auto;
}
.animate {
animation: spin 4s linear infinite;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="block">
Block
</div>

Answer 2

Your code doesn't render a animation... something is wrong there. I recommend you to find a piece of working code, and read it and adapt. For example this one, has a menu, but you can change all make it work for your purposes.
Check this example that works and re-use the code.
The menu bar slides down on page load, pure CSS.
header {
background: #666;
color: #fff;
height: 20px;
position: relative;
padding: 10px;
-moz-animation-name: dropHeader;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 0.5s;
-webkit-animation-name: dropHeader;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 0.5s;
animation-name: dropHeader;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
header ul {
list-style: none;
margin: 0;
padding: 0;
}
header ul li {
display: inline-block;
margin-right: 20px
}
header ul li a {
color: #eee;
text-decoration: none;
}
#-moz-keyframes dropHeader {
0% {
-moz-transform: translateY(-40px);
}
100% {
-moz-transform: translateY(0);
}
}
#-webkit-keyframes dropHeader {
0% {
-webkit-transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes dropHeader {
0% {
transform: translateY(-40px);
}
100% {
transform: translateY(0);
}
}
/* For aesthetics only */
body {
margin: 0;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
.intro {
padding: 40px;
}
.intro h1 {
font: 200 1.7em Segoe UI, "Segoe UI Light", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-weight: 200;
color: #666;
}
.intro p {
max-width: 600px;
}
<header>
</header>
<div class="intro">
</div>