redeagle47 redeagle47 - 1 month ago 5
CSS Question

css animation with keyframes on chrome isn't playing

I am trying to make a simple animation where a paragraph tag loops around a div. Currently, I can't get the animation to play at all. After some looking, I saw a few other questions on SO where the solution was to add vendor prefixes. I'm on Chrome, so I added that prefix. That didn't work. I saw another where I needed to add the vendor prefix to the animation property, so I tried that. That didn't work, either.

Here is my html:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<main>
<div class="box">
<p class="animated">Hello</p>
</div>
</main>
</body>
</html>


And my css in css/main.css:

.box {
width: 500px;
height: 500px;
background-color: #ddd;
}

@keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}

@-webkit-keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}

p {
display: inline-block;
background-color: red;
color: white;
padding: 10px;
margin: 0;
}

.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s linear infinite;
}


I have a codepen of it here: http://codepen.io/khall47/pen/pNogKz

Answer

When you change the left/top property values on an element, it needs to have a position or else nothing happens, so ..

..give the .animated rule position: relative; and it will work fine.

Updated codepen: http://codepen.io/anon/pen/gLOrwy

Side note, always put prefixed properties before non-prefixed in your CSS rules