SHARE
TWEET

SVG animation

a guest Jul 28th, 2016 125 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. My CSS
  2. svg {
  3.   #grafi {
  4.     stroke: #000;
  5.     stroke-width: 1;
  6.     stroke-dasharray: 1000px;
  7.     stroke-dashoffset: 1000px;
  8.     animation-name: draw;
  9.     animation-duration: 5s;
  10.     animation-fill-mode: forwards; // Stay on the last frame
  11.     animation-iteration-count: 1; // Run only once
  12.     animation-timing-function: linear;
  13.   }
  14. }
  15.  
  16. @keyframes draw {
  17.   to {
  18.     stroke-dashoffset: 0;
  19.   }
  20. }
  21.  
  22. My HTML:
  23. <polyline id="grafi" points="" style="fill:none;stroke:red;stroke-width:0.7">
  24.             </polyline>
  25. ***I add points to polyline in JS with append (it works because I get the line just the animation is not there)
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top