I'm having some trouble with this code and could use some help figuring out what's wrong. I tried using -webkit- but it didn't work when trying to animate the objects across the screen.
Here is the HTML:
<body>
<h1 class='cloud'>
SKILLS
</h1>
<h1 class='balloon'>
WORKS
</h1>
</body>
And here is the CSS:
.cloud {
background: url(../image/cloudskills.svg) no-repeat;
height: 100px;
width: 130px;
text-indent: -999em;
animation: cloud 5s linear infinite;
-webkit-animation: cloud 5s linear infinite;
}
@-webkit-keyframes cloud {
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}
.balloon {
background: url(../image/balloonworks.svg) no-repeat;
width: 100px;
height: 130px;
text-indent: -999em;
animation: balloon 5s linear infinite;
}
@keyframes balloon{
0%, 100% {
left: 0%;
}
50% {
left: 100%;
}
}