Animation Effects | Smartchart开发手册

Introduction #

SmartChart supports CSS animations to make dashboard elements more dynamic, including rotation, deformation, color gradients, etc. Apply CSS animation class names to components without importing additional libraries.

Auto Rotation #

Add the following style in template’s <style> section:

@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.Rotate {
    -webkit-animation: spin 3s linear 3s 5 alternate;
    animation: spin 3s linear infinite;
}

To rotate any component, add the Rotate class:

<img class="Rotate" src="https://www.smartchart.cn/media/editor/smc162_20220407150432307320.png">

Rotate chart container:

/* Rotate container 0 */
#container_0 { animation: spin 5s linear infinite; }

Component Deformation #

Common deformation along Y axis. For containers 0 and 1:

#container_0{transform:skewY(10deg);}
#container_1{transform:skewY(-10deg);}

Color Change Effect #

@keyframes changeColor {
0% {color: #f00;}
25% {color: #0f0;}
50% {color: #00f;}
75% {color: #ff0;}
100% {color: #f00;}
}
.Colorchange {animation: changeColor 3s infinite;}

Screenshot

Blink/Breathing Effect #

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}
.Blink { animation: blink 1.5s ease-in-out infinite; }

Animation Property Reference #

animation: name duration timing-function delay iteration-count direction;
/* Example: animation: spin 3s linear 0s infinite normal */

/* Common timing functions */
linear        /* Constant speed */
ease-in-out   /* Slow-fast-slow */

/* Iteration count */
infinite      /* Infinite loop */
3             /* Run 3 times */