As front-end designers and developers, we use CSS to style, position and create great looking sites. We often use CSS to add movement to pages in the form of transitions or even animations, but we don’t usually go much beyond that.

Animation can be a powerful tool to help our visitors and customers understand and benefit from our designs. There are principles we can apply to our work to make the most of this power.

Growth

Use of animation on the web are rising, largely because of the transition and @keyframes additions to CSS. There once was a time when animations and CSS didn’t know one another, but that isn’t the case today. Articles, tutorials, premium courses and even motion guidelines are far more accessible now than they once were. Combining @keyframes with the animation property, along with transition has finally given developers the chance to craft motion properly and lend interfaces a personality and life once unconsidered.

Animation Property & Keyframes

Transitions do a great job of building out visual interactions from one state to another, and are perfect for these kinds of single state changes. However, when more control is required, transitions need to have multiple states. In return, this is where animations pick up where transitions leave off.

To set multiple points at which an element should undergo a transition, use the @keyframes rule. The @keyframes rule includes the animation name, any animation breakpoints, and the properties intended to be animated

@keyframes slide {

 0% { 
  left: 0;
  top: 0;
 } 

50% { 
 left: 244px;
 top: 100px;
 }

 100% { 
  left: 488px;
  top: 0;
 }
}

Vendor Prefixing the Keyframe Rule
The @keyframes rule must be vendor prefixed, just like all of the other transition and animation properties. The vendor prefixes for the @keyframes rule look like the following:

@-moz-keyframes
@-o-keyframes
@-webkit-keyframes

<div class="stage">
   <figure class="ball">
    <figure class="ball-2">
       <div class="innox-logo-anim xx-small circle-logo whiteFG">
        <div class="innox-logo-anim-plane">
          <div class="partA part">
            <div class="cside s1">
       </div>
        <div class="cside s2">
     </div>
    <div class="cside s5">
  </div>
</div>
  <div class="part">
     <div class="cside s3"></div>
       <div class="cside s4"></div>
        <div class="cside s6"></div>
     </div>
    </div>
   </div></figure>
  </figure>
  <div class="bg-transparent">
 </div>
</div>

Animations Keyframes Demo
Hover over the ball below to see the animation in action.

.stage {
  background-image: url(http://alpha.codalien.com/blog/wp-content/uploads/2017/12/team-pic.jpeg);

  border-radius: 50px 50px 0 0;
  height: 236px;
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 100% 27%;
  width: 100%;
  margin: auto;
  overflow:hidden;
}
.bg-transparent {
  background: rgba(0, 0, 0, 0.5);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  z-index:1;
  left:0;
}
.stage:hover .ball {
  animation-name: slide;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-delay: .5s;
  animation-iteration-count: infinite;
}
.stage .ball {
  background: rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  padding:5px;
  height: 100px;
  position: absolute;
  width: 100px;
  display: block;
  z-index:2;
  -webkit-animation: slide 5s infinite; /* Safari 4+ */
  -moz-animation:    slide 5s infinite; /* Fx 5+ */
  -o-animation:      slide 5s infinite; /* Opera 12+ */
  animation:        slide 5s infinite; /* IE 10+, Fx 29+ */
  animation-direction: alternate
}
.stage .ball .ball-2{
  background-color: rgba(0, 0, 0, 0.74);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  z-index: 2;
  box-shadow: inset 0px 0px 0px 18px #5025bf;
}