CSS3 Squire Animation

0 3522

CSS3 Squire Animation - through this you can give animated radius on square box.

Modify border radius size, background color of box, height width of box, border radius size - all can modify as per your requirement.

Just simple copy below code and paste into your web page or blog.

Example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@-webkit-keyframes squire {
0% {
border-radius:0 0 0 0;
}
25% {
border-radius:30% 0 0 0;
}
50% {
border-radius:30% 30% 0 0;
}
75% {
border-radius:30% 30% 30% 0;
}
100% {
border-radius:30%;
}
}
.squire {
width: 400px;
height: 400px;
background-color: #ddd;
animation: squire 3s 2s alternate;
}

</style>
</head>

<body>
<div class="squire">

</div>
</body>

</html>