How to make an image drawing animation from left to right?

C

Christina2017-05-26 06:32:56

css

Christina, 2017-05-26 06:32:56

And how to specify dasharray so that on all screens it is equal to the width of the window?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
  <title>SVG</title>
  <link rel="icon" type="image/png" href="favicon.png" />
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="jquery-1.9.1.min.js"></script>
  </head>
<body>

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 460.3 46.2" style="enable-background:new 0 0 460.3 46.2;" xml:space="preserve">
<style type="text/css">
  .path{fill:#EE463B;}
</style>
  <g>
    <path class="path" stroke="#EE463B" d="M460.3,28.8c-0.4,0-0.7,0.1-1.1,0.1c-12,0-24,0-36,0c-1.3,0-2.6-0.1-3.8-0.2c-1.5-0.1-2.7-0.9-3.6-2.1
    c-0.5-0.6-1.1-1.3-1.8-1.8c-1.4-1.2-2.5-1.1-3.8,0.2c-0.5,0.5-0.9,1-1.4,1.5c-1.6,1.8-3.5,3-6,2.7c-1.1-0.1-1.7,0.4-2.1,1.4
    c-1,2.2-1.9,4.3-3,6.4c-0.7,1.4-1.8,2.2-3.5,2.1c-1.2-0.1-2.1-0.5-2.5-1.6c-2.3-6-4.6-12-7-18c-0.7-1.8-1.5-3.6-2.3-5.4
    c-0.5-1.2-1.7-1.3-2.5-0.2c-0.4,0.5-0.6,1.2-0.9,1.8c-1.6,4.2-3.1,8.3-4.6,12.5c-1.1,2.9-3.2,3.2-5.3,1c-0.1-0.1-0.1-0.1-0.2-0.2
    c-1.8-1.9-1.8-1.8-4.2-1c-1.2,0.4-2.6,0.8-3.8,0.8c-14.4,0.1-28.8,0.1-43.2,0.2c-0.8,0-1.6-0.1-2.4-0.2c-1.5-0.2-2.5-1.1-3.2-2.4
    c-0.8-1.5-1.7-3-2.6-4.5c-0.5-0.9-1.1-1-1.8-0.3c-0.6,0.6-1.2,1.2-1.6,1.9c-0.8,1.4-1.5,2.9-2.2,4.4c-0.5,1.2-1.3,1.7-2.6,1.7
    c-3.2,0-3.2,0.1-4.2,3.2c-1.2,3.7-2.4,7.5-3.7,11.2c-0.7,2.1-2.1,2.8-4.2,2c-0.6-0.2-1.2-1.1-1.4-1.7c-1.4-5-2.8-9.9-3.9-14.9
    c-1.8-8-3.4-16-5.1-23.9c-0.2-0.8-0.8-2-1.3-2c-1.1,0-1,1.2-1.2,2c-1.9,7.6-3.7,15.3-5.6,22.9c-0.2,0.6-0.4,1.2-0.5,1.8
    c-0.2,0.9-0.6,1.6-1.7,1.8c-1.2,0.1-2.2-0.1-2.8-1.2c-0.6-1.1-1.1-2.3-1.7-3.5c-0.7-1.5-1.1-1.6-2.1-0.3c-1.2,1.6-3,1.8-4.8,2
    c-0.9,0.1-1.8,0.1-2.6,0.1c-16.6,0-33.1,0-49.7,0c-1.5,0-3-0.2-4.5-0.2c-1.7-0.1-2.9-1-3.9-2.3c-0.4-0.5-0.8-0.9-1.2-1.3
    c-1.4-1.2-3-1.2-4.4,0c-0.5,0.5-1,1.1-1.4,1.6c-1.4,1.7-3.2,2.7-5.5,2.4c-1.4-0.1-2,0.5-2.5,1.7c-0.9,2-1.8,4-2.8,6
    c-0.7,1.3-1.6,2.3-3.3,2.2c-1.3-0.1-2.3-0.5-2.9-1.8c-2.1-5.4-4.2-10.9-6.4-16.3c-0.9-2.3-1.9-4.6-2.9-6.9
    c-0.5-1.1-1.6-1.3-2.4-0.3c-0.4,0.5-0.6,1.1-0.9,1.7c-1.6,4.3-3.2,8.6-4.8,12.9c-0.9,2.5-3.1,2.9-5,1c-0.2-0.2-0.4-0.4-0.6-0.6
    c-1.2-1.3-1.6-2-3.5-0.8c-0.9,0.6-2.1,0.7-3.2,0.7c-10.3,0.1-20.6,0.2-31,0.2c-7.2,0-14.4,0-21.6-0.2c-2.7-0.1-5.4-0.3-8-0.8
    c-3-0.6-6-0.6-8.9,0.2c-3.4,1-6.7,2-10,3.3c-3.8,1.6-5.9,1.4-8.9-1.5c-1.7-1.6-3.3-3.3-5-4.9c-1.6-1.6-3.9-1.6-5.6-0.1
    c-1.2,1.1-2.5,2.3-3.7,3.4c-1.2,1.1-2.6,1.4-4,0.9c-2.4-0.8-4.8-0.7-7.2-0.7c-9.2,0.1-18.5,0.2-27.7,0.3c-0.4,0-0.9-0.1-1.3-0.2
    c0-0.1,0-0.3,0-0.4c0.5-0.1,0.9-0.2,1.4-0.2c6.4,0,12.9,0,19.3,0c2.7,0,5.4-0.4,8.1-0.5c2.2,0,4.5,0.1,6.7,0.4
    c1.6,0.2,2.8-0.1,3.9-1.2c0.9-1,1.9-1.9,3-2.8c2.5-2.1,6.4-2,8.8,0.2c2,1.8,3.9,3.7,5.8,5.6c1.5,1.6,3.9,2.1,5.6,0.3
    c0.7-0.8,2-1.3,3-1.5c3.4-0.7,6.9-1.4,10.4-1.8c1.3-0.2,2.8,0,4.1,0.3c3.3,0.9,6.7,1.3,10.2,1.3c6.1,0,12.2,0,18.2,0
    c7.3,0,14.6-0.1,21.8-0.1c3.3,0,6.6,0.1,9.9-0.1c2.1-0.1,4.2-0.3,5.8-2c1.1-1.1,2.8-0.8,3.9,0.4c0.1,0.1,0.3,0.3,0.4,0.5
    c0.6,0.8,1.1,1.9,2.2,1.5c0.7-0.3,1.3-1.2,1.6-2c1.7-4.2,3.3-8.5,4.9-12.7c0.7-1.9,2.4-2.7,4.3-2c0.3,0.1,0.6,0.2,0.7,0.4
    c0.8,1.4,1.7,2.9,2.3,4.4c2.4,6.3,4.6,12.6,6.9,18.9c0.2,0.6,0.4,1.1,0.8,1.6c0.8,1.1,1.6,1.1,2.3-0.1c1.1-2.2,2.2-4.4,3.2-6.6
    c0.9-2,0.9-2.3,3.1-2c2.8,0.4,4.4-1,6-2.8c2.6-3,6.3-3.2,8.9-0.1c2,2.3,4.3,3,7.2,3c16.4-0.1,32.7,0,49.1,0c0.8,0,1.6,0,2.4,0
    c1.9-0.1,3.5-1,4.3-2.8c0.5-1.2,1.4-1.9,2.8-1.9c1.4-0.1,2.1,0.7,2.7,1.8c0.6,1.1,1.4,2,2.1,3c0.1,0,0.3-0.1,0.4-0.1
    c0.2-0.5,0.4-1,0.5-1.5c1.3-5.7,2.5-11.5,3.9-17.2c0.5-2.2,1.2-4.3,2-6.4c0.4-0.9,1.1-1.8,1.8-2.5c1-0.9,2.5-0.6,3.1,0.6
    c0.8,1.6,1.5,3.3,2.2,4.9c0.1,0.3,0.2,0.5,0.2,0.8c1.6,9.7,3.3,19.4,5.8,28.9c0.6,2.3,1.5,4.5,2.2,6.7c0.1,0.3,0.3,0.5,0.6,1.1
    c0.4-0.6,0.8-1.1,0.9-1.5c1.2-3.7,2.3-7.5,3.4-11.2c0.9-3.2,1-3.4,4.4-2.9c1.2,0.2,2-0.2,2.6-1.4c0.7-1.6,1.6-3.1,2.4-4.6
    c1.8-3.1,6.1-3.2,8-0.1c0.9,1.4,1.8,2.9,2.6,4.4c0.7,1.3,1.8,1.9,3.3,1.9c12.5,0,25,0.2,37.6,0.2c2.1,0,4.2-0.2,6.3-0.5
    c0.9-0.1,1.8-0.6,2.5-1.3c1.5-1.5,3.5-1.5,4.8,0.2c0.2,0.3,0.4,0.6,0.6,0.9c1.1,1.3,2.3,1.2,3-0.5c1-2.6,1.9-5.2,2.9-7.7
    c0.8-2,1.5-4,2.3-5.9c0.8-1.8,2.5-2.5,4.3-1.9c0.2,0.1,0.5,0.2,0.7,0.5c4,7.3,6,15.4,9.1,23.1c0.2,0.5,0.3,1,0.6,1.4
    c0.8,1.5,1.8,1.6,2.6,0.1c1.1-2,2.1-4,2.9-6c1-2.5,1-2.7,3.6-2.4c2.6,0.2,4.4-1,5.6-3c1.6-2.6,6.8-2.6,8.5-0.4
    c0.5,0.6,1.1,1.2,1.6,1.8c1.1,1.1,2.4,1.6,3.9,1.6c12,0,24.1,0,36.1,0c0.8,0,1.6,0,2.4,0C460.3,28.4,460.3,28.6,460.3,28.8z"/>
  </g>
</svg>

</body>
</html>

.path {
  stroke-dasharray: 100 1680;
  stroke-dashoffset: 100;
  animation: dash 10s linear forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: -1680;
  }
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

A person from Kazakhstan, 2017-05-26
@KrisIris

Well, actually, the movement from left to right is by default .. I just checked it (I took the girl from tyrnet and converted it to svg and animated it) https://codepen.io/Geyan/pen/BREzXr
This is your example with implementation : https:// codepen.io/Geyan/pen/NjmRNO?editors=1100