CODEWITHSUNDEEP
css
cookie
cookie

Reputation: 2718

animation through CSS3

I'm expecting to see some animation on the circle. I doesn't! The circle remains stationary on page load. I've tried it in FF and Chrome. As far as I know the syntax is correct? 

<!doctype html>
<html>
<head>
<title>CSS animations</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
#balloon-one {
background:yellow;
border-radius:50px;
border:2px solid #FFCC00;
position:absolute;
height:100px;
width:100px;
top:200px;
left:300px;
-webkit-animation: floataround 5s infinite;
}
@-webkit-keyframes float {
0% { -webkit-transform: translateX(-20px) translateY(10px); }
30% { -webkit-transform: translateX(10px) translateY(-20px); }
70% { -webkit-transform: translateX(-10px) translateY(20px); }
100% { -webkit-transform: translateX(-20px) translateY(10px); }

    0% { -moz-transform: translateX(-20px) translateY(10px); }
30% { -moz-transform: translateX(10px) translateY(-20px); }
70% { -moz-transform: translateX(-10px) translateY(20px); }
100% { -moz-transform: translateX(-20px) translateY(10px); }
}
</style>

</head>

<body>

<div id="balloon-one"></div>
</body>
</html>

help

Upvotes: 0

Views: 323

Answers (1)

TonioElGringo
TonioElGringo

Reputation: 1037

I can see several errors in your code. First your animation is set to "floataround", but your animation name is juste "float". Then you mixed up -moz and -webkit prefixes. Here is a corrected version of your css:

#balloon-one {
    background:yellow;
    border-radius:50px;
    border:2px solid #FFCC00;
    position:absolute;
    height:100px;
    width:100px;
    top:200px;
    left:300px;
    -webkit-animation: float 5s infinite;
    -moz-animation: float 5s infinite;
    animation: float 5s infinite;
}
@-webkit-keyframes float {
    0% { -webkit-transform: translateX(-20px) translateY(10px); }
    30% { -webkit-transform: translateX(10px) translateY(-20px); }
    70% { -webkit-transform: translateX(-10px) translateY(20px); }
    100% { -webkit-transform: translateX(-20px) translateY(10px); }
}
@-moz-keyframes float {
    0% { -moz-transform: translateX(-20px) translateY(10px); }
    30% { -moz-transform: translateX(10px) translateY(-20px); }
    70% { -moz-transform: translateX(-10px) translateY(20px); }
    100% { -moz-transform: translateX(-20px) translateY(10px); }
}
@keyframes float {
    0% { transform: translateX(-20px) translateY(10px); }
    30% { transform: translateX(10px) translateY(-20px); }
    70% { transform: translateX(-10px) translateY(20px); }
    100% { transform: translateX(-20px) translateY(10px); }
}

Tried on chrome, it works. Not tried with firefox.

Upvotes: 2

Related Questions