November 09, 2015

Animating an element using CSS3

Animation is a fun process and CSS gives the ability to do this fun stuff. Let us see an example by animating an element using CSS3. Below is an example code

<head>
<style>
div {
   position:absolute;
   top:10px;
   height:100px;
   width:100px;
   border:2px solid black;
  }

div#box-1 {
  background:green;
  left:30px;
  z-index:1;
  }

div#box-2 {
  background:red;
  left:500px;
  z-index:1;
  background-color: red;
  }

div#box-3 {
  background-color:blue;
  left:30px;
  border-radius:65px;
  z-index:2;
  }

@-ms-keyframes slide {
  from { left:30px } to { left:500px }}
@-moz-keyframes slide {
  from { left:30px } to { left:500px }}
@-webkit-keyframes slide {
  from { left:30px } to { left:500px }}
@-o-keyframes slide {
  from { left:30px } to { left:500px }}
@keyframes slide {
  from { left:30px } to { left:500px }}

  div#box-3 {
-ms-animation:slide 2s alternate infinite;
-moz-animation:slide 2s alternate infinite;
-webkit-animation:slide 2s alternate infinite;
-o-animation:slide 2s alternate infinite;
animation :slide 2s alternate infinite;

  }

</style>
</head>

<body>
<div id="box-1">A</div>
<div id="box-2">B</div>
<div id="box-3"></div>
</body>

</html>

See the Result:

A B









END...

No comments :

Post a Comment