I've been coding a website of mine, and I encountered this absolutely annoying problem!
My CSS animations, for my 404 page aren't working. All of the other style definitions work perfectly though, EXCEPT animations. This leads me to believe, that something is wrong with my CSS. If you need extra code, I'm willing to provide you it. My website is using Node.JS with a framework called Express to host the website. Again, the rest of the CSS works fine EXCEPT the animations. Here is the hellhole that is my CSS:
#font-face {
font-family: 'Consolas';
src: url("/fonts/consolas.woff") format("woff");
};
/* #keyframes slidein {
0% {margin-top:50px;opacity:0;filter:blur(5px);}
100% {margin-top:60px;opacity:1;filter:blur(0px);}
}; */
#keyframes slidein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
* {
padding: 0 auto;
margin: 0 auto;
}
body {
background-color: #232323;
color:white;
font-family: 'Consolas';
}
.content {
margin: auto;
text-align: center;
width: 100%;
height: 100%;
}
.t404 {
margin-top:50px;
opacity:0;
filter:blur(5px);
font-size: calc(50pt + 2vmin);
color: #00bcd9;
animation: 1s ease-out slidein;
-webkit-animation: 1s ease-out slidein;
}
.t404text {
color: white;
}
Here's my HTML as well:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/resources/style.css">
<title>le testpage - 404</title>
</head>
<body>
<div class="content">
<p class="t404">404</p>
<p class="t404text">The page you were looking for was, unfortunately, not found.</p>
</div>
</body>
</html>
Can someone help me please?
Your keyframes definition is not being seen because you have a semi colon after the definition before.
Here it is without that ;
#font-face {
font-family: 'Consolas';
src: url("/fonts/consolas.woff") format("woff");
}
/* #keyframes slidein {
0% {margin-top:50px;opacity:0;filter:blur(5px);}
100% {margin-top:60px;opacity:1;filter:blur(0px);}
}; */
#keyframes slidein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
* {
padding: 0 auto;
margin: 0 auto;
}
body {
background-color: #232323;
color: white;
font-family: 'Consolas';
}
.content {
margin: auto;
text-align: center;
width: 100%;
height: 100%;
}
.t404 {
margin-top: 50px;
filter: blur(5px);
font-size: calc(50pt + 2vmin);
color: #00bcd9;
animation: 1s ease-out slidein;
-webkit-animation: 1s ease-out slidein;
}
.t404text {
color: white;
}
<div class="content">
<p class="t404">404</p>
<p class="t404text">The page you were looking for was, unfortunately, not found.</p>
</div>
Try using this:
I think the problem is that you are running your animation for just one second and also once. Try making its animation-iteration-count infinite.
#keyframes slidein {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.t404 {
margin-top:50px;
transition: opacity .3s;
filter:blur(5px);
font-size: calc(50pt + 2vmin);
color: #00bcd9;
animation: slidein 2s infinite ease-out;
-webkit-animation: slidein 2s infinite ease-out;
}
Related
i have a html page with gradient transition background,
the background colors change automatically after 5 seconds and hense creating a animation. I am using css & key frames for this.
I am converting this html page to a AMP page.
This transition works in plain html pages, but shows the first color only when started in am.
how can i get it working?
working Code-
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<body style="background-color:#2c3333;"></body>
</body>
</html>
Style.css-
.user {
display: inline-block;
width: 170px;
height: 170px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
body {
font-size: 1em;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
}
.head-div {
text-align: center;
color: #000000;
/* padding:0%;
padding-top:7%;
padding-bottom:300%; */
}
img {
pointer-events: none;
display: inline-block;
width: 150px;
height: 150px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
object-fit: cover;
}
.link-div {
padding: 10%;
padding-top: 1%;
padding-bottom: 1%;
color: #2c3333;
}
.alink {
text-align: center;
margin-top: 1px;
padding: 20px 0;
max-width: 590px;
display: block;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
color: #2c3333;
text-decoration: none;
}
.alink:hover {
color: #ffffff;
background-color: #54bab9;
border: 2px solid;
border-color: #ffffff;
}
.copyright {
text-align: center;
color: #ffffff;
}
.getlink {
font-size: 17px;
text-align: center;
color: #ffffff;
}
.footer {
position: fixed;
bottom: 25px;
left: 0;
right: 0;
text-align: center;
}
#keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
SO after some Research and experimenting with AMP, finally i came with an answer to my own problem,
Posting this here so that if any one gets the same problem, Gets a solution.
So the problem was that i was having a AMP webpage and i wanted to get the background Gradient animation working like it is working in the index.html file,
i was not, but i have solution.
it was no working because we were trying to manipulate body of html using css,. which works in html, but not in css.
The solution is to create a div in body tag and some changes in amp-style.
.divanim is the div here
Here is the working AMP page-
index.amp.html-
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashutosh_7i</title>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
.divanim {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100%;
}
#keyframes gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
</style>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both
}
#-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
#keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<div class="divanim">
//body with gradient
</div>
</body>
</html>
amp animation on their website is very confusing , alteast for me, but i got the solution anyways.😉
I was trying to make an animation as an exercise to learn. When I hover over the circle, I want to apply an animation to it and also for the text in the .hide element to appear. But when I hover the circle and then move the mouse over the text, the animations stop.
Is there a way to keep both animation going even if I hover the text in the .hide element? I've tried to create an :hover subclass for the .hide class with animations, tried to add the animation to the .hide class, and tried both together, but I can't figure it out.
Also, that little black line that pops up at the beginning of the hover is annoying, if anyone know how to get rid of it.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.circle-icon:hover {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover + .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
There are a few changes you need, I've explained each one after the example, but in summary:
The main reason you are having issues is because you are acting on the hover over the circle-icon only - this means when you move the mouse off it (even if it is to the associated text) the hover effect ends. Therefore you need to act on hovering over the whole link, not just the circle.
Working Example:
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
a.icontextlink { text-decoration:none;}
.icontextlink:hover .circle-icon {
padding: 30px;
animation-name: spin;
animation-duration: 1s;
animation-iteration-count: 2;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.icontextlink:hover .hide {
display: inline-block;
background-color: gray;
width: 100px;
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 100px;
font-size: 100%;
}
}
<script
src="https://kit.fontawesome.com/7dd2bd858f.js"
crossorigin="anonymous"
></script>
<div class="container">
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
Changes to make it work:
1. Add a class to the link so we can apply CSS to it and not all a elements in your container, e.g.
<a href="#" class="icontextlink">
<i class="fas fa-home circle-icon"></i><span class="hide">HOME</span>
</a>
2. Add the animation to the circle when the whole link is hovered. We do this by changing the CSS selector from .circle-icon:hover to .icontextlink:hover .circle-icon, e.g.:
.icontextlink:hover .circle-icon { animation-name: spin; /* etc... */ }
3. Display the hide class when the whole link is hovered - this means that even if you move the mouse off the circle and onto the text, it is still part of the same link so the effect does not end. So we change the selector from .circle-icon:hover + .hide to .icontextlink:hover .hide:
.icontextlink:hover .hide { display: inline-block; /* etc... */ }
4. Hide the blue line on hover - The blue line you see is the default styling for links in the browser. We can turn this
off using text-decoration:none;, e.g.
a.icontextlink { text-decoration:none;}
5. Fix the rotation animation FYI, you don't mention it in your question but the spin animation is not working. This is because you are using e.g. rotate: 0deg;. The correct way is transform: rotate(0deg);:
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Ok so:
For the "little black line" - it's the text-decorator property of the a tag.
For the animation - the problem was that when you don't hover on the home button (since you move the cursor or whatsoever), the :hover does not apply and you back to display:none, but then the button moves to the cursor and you again hovering it (and so on till the end of times). So I just set that when you hover on the text, the display is inline-block.
.container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-icon {
background: gray;
border-radius: 50%;
padding: 15px;
color: white;
transition: padding 1s;
margin: 0px;
}
.hide:hover {
display: inline-block;
}
.hide {
position: relative;
left: -15px;
display: none;
line-height: 40px;
height: 40px;
width: 100px;
text-align: center;
border-radius: 0 50px 50px 0;
margin: 0px;
vertical-align: middle;
color: white;
background-color: gray;
animation-name: slide;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-direction: forward;
}
.circle-icon:hover+.hide {
display: inline-block;
}
#keyframes spin {
0% {
rotate: 0deg;
}
100% {
rotate: 360deg;
}
}
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
100% {
width: 80px;
font-size: 100%;
}
}
a {
text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/7dd2bd858f.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<a href="#">
<i class="fas fa-home circle-icon"></i>
<span class="hide">HOME</span>
</a>
</div>
</body>
</html>
To remove the black line I did:
*{
text-decoration: none;
}
at the top of the css document
also i made the text showing up animation smoother:
#keyframes slide {
0% {
width: 0px;
font-size: 0%;
}
25% {
font-size: 0%;
}
27% {
font-size: 20%;
}
100% {
width: 100px;
font-size: 100%;
}
}
I'm trying to make my button fade in with keyframes but it isn't working and I know I'm doing something wrong. I ended up getting the animated text to work but this is giving me a headache and I cannot find info anywhere that has helped me... I'm new to web development so don't be too harsh on me or my (probably ugly and unorganized) code lol. I'm trying to learn as much as I can, so if you can please explain why it isn't working and why something else might? Thanks guys <3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<title>Welcome! | Video Editing by Scottis</title>
</head>
<body>
<!-- Header -->
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<!-- Buttons -->
<style>
.btn {
background-color: white;
color: rgb(133, 4, 255);
text-align: center;
font-size: 15px;
font-weight: bold;
margin-right: -250px;
margin-top: 600px;
margin-left: 515px;
padding: 30px;
}
</style>
</head>
<body>
<button class="btn">Portfolio</button>
<button class = "btn">Pricing</button>
<button class="btn">Contact</button>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span{
color: white;
text-transform: uppercase;
display: block;
}
.text1{
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0%{
margin-bottom: -20%;
}
30%{
letter-spacing: 25px;
margin-bottom: -40px;
}
85%{
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
#keyframes button {
0%{
opacity: 0%;
}
0%{
opacity: 0%;
}
25%{
opacity: 25%;
}
50%{
opacity: 50%;
}
75%{
opacity: 75%;
}
100%{
opacity: 100%;
}
}
You have some issues with your code first off. You are repeating both the head and body tags out of proper valid html sequence. Have a close look at the following page and resource from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
As to your issue with keyframes, define the class you wish to control with the sequence in your css and add the animation with a unique call name, I used fadeIn. Below I have added Mozilla, webkit, opera and ms #keyframe animations for opacity. I am defining the animation to start the timer (3 seconds) #keyframe 0% { opacity: 0; } , then end at 100% { opacity: 1; }. I add multiple kits for different browsers.
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
}
body {
background-image: url("./assets/background.png");
background-color: #cccccc;
background-repeat: no-repeat;
}
/* Start class for buttons animation fadeIn ease */
.btn {
animation: fadeIn ease 3s;
-webkit-animation: fadeIn ease 3s;
-moz-animation: fadeIn ease 3s;
-o-animation: fadeIn ease 3s;
-ms-animation: fadeIn ease 3s;
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-ms-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* End of animation keyframes */
/* Create three equal columns that floats next to each other */
.col-md-3 {
float: left;
width: 15%;
padding: 15px;
padding: 10px;
margin: auto;
display: block;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width:768px) {
.col-md-3 {
width: 100% auto;
}
}
.col-md-12 {
text-align: center;
}
.card-title {
text-align: center;
}
.container {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.container span {
color: white;
text-transform: uppercase;
display: block;
}
.text1 {
color: white;
font-size: 60px;
font-weight: 700;
letter-spacing: 8px;
margin-bottom: 20px;
position: relative;
animation: text 3s 1;
}
#keyframes text {
0% {
margin-bottom: -20%;
}
30% {
letter-spacing: 25px;
margin-bottom: -40px;
}
85% {
letter-spacing: 15px;
margin-bottom: -40px;
}
}
}
<div class="container">
<span class="text1">Video Editing by Scottis</span>
</div>
<button class="btn">Portfolio</button>
<button class="btn">Pricing</button>
<button class="btn">Contact</button>
I am a newbie i just want to add fadeout in my text moving after it already finish moving. but the problem is i already put the #keyframe fadeout. and .fadeout. but it didnt work. Any help please? Thank you. This is the code.
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
CSS
body {
font-family: sans-serif;
margin: 50px;
}
h1 {
animation: move 8s;
-webkit-animation: move 8s;
}
#keyframes move {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
background:linear-gradient(transparent 150px, white);
}
}
#-webkit-keyframes move {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
#-webkit-keyframes fadeOut {
0% {opacity: 1;}
100% {opacity: 0;}
}
#keyframes fadeOut {
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}
Unless you've got a reason to split it up you could just put it all in the same animation by adding one more step to it like this:
body {
font-family: sans-serif;
margin: 50px;
}
h1 {
animation: move 3s forwards;
-webkit-animation: move 3s forwards;
}
#keyframes move {
from {
margin-left: 100%;
width: 300%;
}
90% {
margin-left: 0%;
width: 100%;
background:linear-gradient(transparent 150px, white);
opacity: 1;
}
to {
opacity: 0;
}
}
#-webkit-keyframes move {
from {
margin-left: 100%;
width: 300%;
}
90% {
margin-left: 0%;
width: 100%;
opacity: 1;
}
to {
opacity: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Watch me move</h1>
</body>
</html>
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!
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>
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>