CSS animation Property with example
The CSS Animation property allow to do simple animations without JavaScript. It possible to animate transitions from CSS. Here's a list of some of the great stuff for your websites and web apps creating with CSS animations. CSS Animation property is used as a replacement of animation created by JavaScript.
Swing Animation
<span class="icon-cir"><i class="fa ti-volume swing" aria-hidden="true"></i></span> .swing { animation: swing ease-in-out .6s infinite alternate; }
Fade In / Fade Out Effect
<span class="icon-cir"><i class="fa ti-volume fadein" aria-hidden="true"></i></span> .fadein { animation: fadeIn ease-in-out .6s infinite alternate; }
Rotation Animation
<span class="icon-cir"><i class="fa ti-settings rotation" aria-hidden="true"></i></span> .rotation { -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }
Loader Spin
<div class="spinKit"></div> .spinKit { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid blue; border-bottom: 4px solid blue; width: 120px; height: 120px; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; display: block; margin-bottom: 5px; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
Zoom Effect / Scale
<div class="dash-icon"><i class="fa ti-settings" aria-hidden="true"></i></div> a:hover .dash-icon { transform: scale(1.3); }
Live Chatbot

<div id="genie"><img width="51" height="104" src="../img/genie.png"></div>
@-webkit-keyframes chatbot { 0% { transform: translateY(-5px) } 50% { transform: translateY(10px) } 100% { transform: translateY(-5px) } } @keyframes chatbot { 0% { transform: translateY(-5px) } 50% { transform: translateY(10px) } 100% { transform: translateY(-5px) } } #genie { width: 51px; -webkit-animation: chatbot 3s infinite ease-in-out; -o-animation: chatbot 3s infinite ease-in-out; -ms-animation: chatbot 3s infinite ease-in-out; -moz-animation: chatbot 3s infinite ease-in-out; animation: chatbot 3s infinite ease-in-out; }