The State of CSS Animation

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;
}

Posted

in

by

kushal

Tags:

Recent Post

  • How to Implement In-Order, Pre-Order, and Post-Order Tree Traversal in Python?

    Tree traversal is an essential operation in many tree-based data structures. In binary trees, the most common traversal methods are in-order traversal, pre-order traversal, and post-order traversal. Understanding these tree traversal techniques is crucial for tasks such as tree searching, tree printing, and more complex operations like tree serialization. In this detailed guide, we will […]

  • Mastering Merge Sort: A Comprehensive Guide to Efficient Sorting

    Are you eager to enhance your coding skills by mastering one of the most efficient sorting algorithms? If so, delve into the world of merge sort in Python. Known for its powerful divide-and-conquer strategy, merge sort is indispensable for efficiently handling large datasets with precision. In this detailed guide, we’ll walk you through the complete […]

  • Optimizing Chatbot Performance: KPIs to Track Chatbot Accuracy

    In today’s digital age, chatbots have become integral to customer service, sales, and user engagement strategies. They offer quick responses, round-the-clock availability, and the ability to handle multiple users simultaneously. However, the effectiveness of a chatbot hinges on its accuracy and conversational abilities. Therefore, it is necessary to ensure your chatbot performs optimally, tracking and […]

  • Reinforcement Learning: From Q-Learning to Deep Q-Networks

    In the ever-evolving field of artificial intelligence (AI), Reinforcement Learning (RL) stands as a pioneering technique enabling agents (entities or software algorithms) to learn from interactions with an environment. Unlike traditional machine learning methods reliant on labeled datasets, RL focuses on an agent’s ability to make decisions through trial and error, aiming to optimize its […]

  • Understanding AI Predictions with LIME and SHAP- Explainable AI Techniques

    As artificial intelligence (AI) systems become increasingly complex and pervasive in decision-making processes, the need for explainability and interpretability in AI models has grown significantly. This blog provides a comprehensive review of two prominent techniques for explainable AI: Local Interpretable Model-agnostic Explanations (LIME) and Shapley Additive Explanations (SHAP). These techniques enhance transparency and accountability by […]

  • Building and Deploying a Custom Machine Learning Model: A Comprehensive Guide

    Machine Learning models are algorithms or computational models that act as powerful tools. Simply put, a Machine Learning model is used to automate repetitive tasks, identify patterns, and derive actionable insights from large datasets. Due to these hyper-advanced capabilities of Machine Learning models, it has been widely adopted by industries such as finance and healthcare.  […]

Click to Copy