amcharts点线图连线动画效果-html代码-BFW代码库

amcharts点线图连线动画效果

代码语言：html

所属分类：图表

代码描述：amcharts点线图连线动画效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
<style>
#chartdiv{
  width: 100%;
  height: 500px;
}

.amcharts-graph-AmGraph-2 {
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 500%;
  stroke-dasharray: 0 /;    /* fixes IE prob */
  stroke-dashoffset: 0 /;   /* fixes IE prob */
  -webkit-animation: am-draw 30s;
  animation: am-draw 30s;
}

@keyframes am-draw {
    0% {
        stroke-dashoffset: 500%;
    }
    100% {
        stroke-dashoffset: 0%;
    }
}

@-webkit-keyframes am-draw {
    0% {
        stroke-dashoffset: 500%;
    }
    100% {
        stroke-dashoffset: 0%;
    }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes flickerIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

.amcharts-category-axis, .amcharts-value-axis, .amcharts-plot-area-left, #description, .amcharts-graph-column, .amcharts-graph-AmGraph-1 {
  opacity: 0;
  -webkit-animation: fadeIn 1.5s ease-in 1 forwards;
  -moz-animation:    fadeIn 1.5s ease-in 1 forwards;
  -o-animation:      fadeIn 1.5s ease-in 1 forwards;
  animation:         fadeIn .........完整代码请登录后点击上方下载按钮下载查看