Home / Questions / 418346
Accepted
Ariel Montes
Asked: 2022-01-05 05:50:38 +0800 CST 2022-01-05 05:50:38 +0800 CST

How to animate the horizontal movement of an SVG path using CSS?

  • 772

I am animating an SVG logo with CSS and I have already managed to create several effects but I cannot understand how to make one of the SVG paths move horizontally (see image).

All my attempts to import the SVG as a file and then style it have also failed, forcing me to put the entire SVG inside the HTML, which I'd rather avoid.

enter image description here

I have tried various things like modifying the widthwithout getting any results. Here I leave my code with the two effects done so far so you can see the method used:

@keyframes light-lines{
    0%{fill:#a9a9a9;opacity:.9}
    100%{fill:#333;opacity:.5}
}
.light{
    animation: light-lines 2s ease-out infinite alternate;
}
@keyframes invisible-text{
    0%{opacity:0}
    100%{opacity:1}
}
#svg-text{
    animation: invisible-text 3s ease-in-out 2s infinite alternate;
}
.mountain{
    /* ? */
}
<svg width="680" height="370" version="1.1" viewBox="0 0 179.91 97.897" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <linearGradient id="a">
            <stop stop-color="#4155b1" offset="0"/>
            <stop stop-color="#b4b9d2" offset="1"/>
        </linearGradient>
        <linearGradient id="h" x1="8.4428" x2="4.5477" y1="2.3952" y2="7.8422" gradientTransform="matrix(4.564 0 0 4.5566 9.2367 9.2687)" gradientUnits="userSpaceOnUse">
            <stop stop-color="#5469c9" offset="0"/>
            <stop stop-color="#5469c9" stop-opacity="0" offset="1"/>
        </linearGradient>
        <radialGradient id="i" cx="7.307" cy="5.1975" r="11.597" gradientTransform="matrix(-9.1176 -.019485 .0095211 -4.4496 153.65 37.949)" gradientUnits="userSpaceOnUse">
            <stop stop-color="#fff" offset="0"/>
            <stop offset="1"/>
        </radialGradient>
        <linearGradient id="g" x1="60.147" x2="83.275" y1="55.208" y2="22.492" gradientTransform="matrix(1.0002 0 0 .99959 -39.935 -.85276)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
        <linearGradient id="f" x1="68.501" x2="74.465" y1="59.82" y2="13.674" gradientTransform="matrix(1.0002 0 0 .99959 .00015499 .00014524)" gradientUnits="userSpaceOnUse" xlink:href="#a"/>
    </defs>
    <g transform="matrix(1.7 0 0 1.7013 -.0036564 -.00016215)" opacity="1">
        <rect x="1.597" y="1.597" width="102.64" height="54.348" rx="2.8679" ry="2.8661" fill="#4d4d4d" opacity="1" stroke="url(#i)" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.1938"/>
        <path class="light" d="m9.2398 47.875 22.601 6.4716 69.367 0.0251c0.68665 2.51e-4 1.4406-0.39775 1.4217-1.5326l-3.7e-4 -25.974-74.08-17.624z" fill="#333" opacity=".5" style="mix-blend-mode:color-dodge"/>
        <path class="light" d="m36.902 19.325 65.721 15.24 7e-3 18.128c2.9e-4 0.73888-0.059 1.6851-1.5811 1.6832l-26.603-0.03468-26.581-6.4666z" fill="#333" opacity=".5" style="mix-blend-mode:exclusion"/>
        <path class="mountain" d="m11.624 46.4 16.853-33.727 5.7463 12.747 2.2676-3.0616 9.2333 24.043z" fill="#fff" opacity="1" stroke="url(#g)" stroke-width="2.9474"/>
        <path class="mountain" d="m9.2401 47.874 19.189-27.927 5.277 11.346 2.1958-3.019 11.969 19.602z" fill="#5469c9"/>
        <path class="mountain" d="m21.037 47.873 6.616-17.447-0.89905-0.70537 2.1006-2.2307-1.8462 0.44723 2.251-2.4795-0.83031-5.5103 5.277 11.346 2.1958-3.019 11.969 19.602z" fill="url(#h)" opacity="1" style="mix-blend-mode:screen"/>
        <g id="svg-text" fill="url(#f)" stroke-width="1.2072" aria-label="ontes">
            <path d="m58.879 40.763q0 2.1457-1.5735 3.6682-1.5327 1.4816-3.6171 1.4816-2.1968 0-3.7091-1.5224-1.502-1.5327-1.502-3.7295 0-2.1355 1.5327-3.6477 1.5429-1.5224 3.6988-1.5224 2.1662 0 3.6682 1.5429t1.502 3.7295zm-0.87873 0.44958q0-1.6859-1.5531-3.2084-1.6042-1.5735-3.5149-1.5735-1.4918 0-2.534 1.0218t-1.0422 2.4114q0 2.0129 1.5838 3.5762 1.5531 1.5327 3.423 1.5327 1.4816 0 2.5136-0.96047 1.124-1.0524 1.124-2.7997z"/>
            <path d="m69.649 39.312q0 1.5122-0.53132 2.9018-0.53132 1.3794-1.5735 2.5544 0.03065 0 0.10218 0.01022 0.08174 0 0.21457 0 0.31675 0 0.59263-0.03065 0.27588-0.04087 0.54154-0.21457 0.26566-0.21457 0.3474-0.27588 0.02044-0.02044 0.06131-0.03065 0.03065-0.01022 0.04087-0.01022 0.1124 0 0.06131 0.18392-0.02044 0.15327-0.04087 0.36784-0.02044 0.21457-0.02044 0.2861 0 0.15327 0.01022 0.32697 0.01022 0.16348 0.03065 0.3474 0.04087 0.20436-0.08174 0.20436-0.05109 0-0.10218-0.04087-0.30653-0.1737-0.42915-0.22479-0.23501-0.09196-0.44958-0.12261-0.20436-0.03065-0.64372-0.03065-0.29632 0-0.47002 0.01022t-0.4598 0.06131q-0.29632 0.05109-0.29632-0.18392 0-0.07153 0.03065-0.12261 0.55176-0.85829 0.85829-1.4203 0.48024-0.88895 0.71524-1.6553 0.2861-0.94004 0.2861-1.9107 0-1.6042-0.71524-2.6055-0.7459-1.0524-2.0231-1.0524-0.85829 0-1.5429 0.48024-0.61307 0.42915-1.0116 1.1955v6.2737q0 0.18392 0.22479 0.37806 0.19414 0.16348 0.38828 0.31675 0.1124 0.1124 0.1124 0.20436 0 0.10218-0.1737 0.10218-0.05109 0-0.4598-0.03065t-0.7459-0.03065q-0.38828 0-0.62328 0.02044-0.22479 0.02043-0.52111 0.04087-0.24523 0-0.24523-0.1124 0-0.07152 0.09196-0.1737t0.29632-0.26566q0.3474-0.26566 0.3474-0.44958v-6.0489q0-0.86851-0.52111-1.4101-0.22479-0.23501-0.78677-0.53132-0.08174-0.04087-0.08174-0.1124 0-0.07152 0.06131-0.13283 0.13283-0.12261 0.22479-0.19414 0.09196-0.08174 0.23501-0.22479t0.22479-0.23501 0.15327-0.18392q0.04087-0.05109 0.1124-0.05109 0.06131 0 0.09196 0.03065 0.36784 0.29632 0.77655 0.82764 0.56198 0.72546 0.65394 1.2568 0.44958-0.73568 1.0933-1.2772 0.96047-0.8072 1.9516-0.8072 1.8392 0 2.8303 1.3794 0.78677 1.0933 0.78677 2.442z"/>
            <path d="m76.188 36.308q0 0.16348-0.14305 0.16348-0.05109 0-0.50067-0.02044t-0.84808-0.02044v6.7642q0 0.72546 0.40871 1.2364 0.1124 0.14305 0.59263 0.54154 0.08174 0.06131 0.08174 0.14305 0 0.05109-0.08174 0.1124-0.08174 0.05109-0.18392 0.1124-0.13283 0.10218-0.20436 0.16348-0.2861 0.25544-0.36784 0.36784-0.08174 0.08174-0.16348 0.08174-0.07152 0-0.14305-0.04087-0.43936-0.24523-0.77655-0.83786-0.47002-0.82764-0.47002-1.9822v-6.662q-0.32697 0-0.62328 0.02044-0.29632 0.01022-0.60285 0.02044-0.14305 0-0.14305-0.16348v-0.32697q0-0.16348 0.18392-0.16348 0.05109 0 0.44958 0.02044 0.39849 0.02043 0.73568 0.02043v-0.77655q0-0.59263-0.25544-0.66416-0.1737-0.02044-0.23501-0.03065-0.14305 0-0.14305-0.14305 0-0.06131 0.06131-0.12261 0.22479-0.19414 0.4598-0.40871 0.23501-0.22479 0.52111-0.51089 0.32697-0.33719 0.50067-0.56198 0.18392-0.22479 0.35762-0.43936 0.03065-0.05109 0.08174-0.05109 0.08174 0 0.08174 0.15327-0.03065 0.26566-0.06131 0.53132-0.06131 0.64372-0.06131 1.3283v1.6962q0.33719 0 0.66416-0.01022t0.68459-0.03065q0.14305 0 0.14305 0.14305z"/>
            <path d="m87.387 43.42q-0.26566 0.86851-1.2772 1.6246-1.1853 0.88895-2.5851 0.88895-0.89916 0-1.594-0.19414-0.79699-0.22479-1.5122-0.76633-0.2861 0.35762-0.52111 0.77655-0.29632 0.52111-0.29632 0.75612 0 0.2861 0.15327 0.39849 0.10218 0.07152 0.33719 0.07152 0.07152 0 0.14305-0.02044 0.06131-0.02043 0.12261-0.04087 0.04087-0.02043 0.07152 0 0.07152 0.04087 0.03065 0.16348-0.06131 0.24523-0.24523 0.44958-0.24523 0.26566-0.5722 0.26566-0.3474 0-0.5722-0.25544-0.22479-0.25544-0.22479-0.66416 0-0.32697 0.22479-0.79699 0.06131-0.13283 0.87873-1.4509-0.75612-0.77655-1.1648-1.6859-0.44958-1.0116-0.44958-2.1764 0-2.1457 1.3896-3.7091 1.3998-1.5633 3.474-1.5633 0.82764 0 1.6962 0.39849 0.48024 0.23501 0.96047 0.4598 0.09196 0.04087 0.26566 0.06131 0.1737 0.02043 0.3474 0.02043l0.30653-0.02043q0.1124 0 0.1124 0.09196 0 0.07152-0.07152 0.1124-0.16348 0.10218-0.35762 0.27588-0.26566 0.22479-0.4598 0.4598-0.99112 1.1035-2.299 2.8916t-2.4625 3.5864q0.60285 0.42915 1.2261 0.66416 0.73568 0.27588 1.5327 0.27588 1.1035 0 1.8188-0.41893 0.52111-0.30653 1.1648-1.0933 0.06131-0.09196 0.14305-0.19414 0.08174-0.1124 0.18392-0.09196 0.13283 0.03065 0.13283 0.19414 0 0.12261-0.05109 0.25544zm-2.7997-6.0285q0-0.60285-0.65394-0.94004-0.55176-0.2861-1.3283-0.2861-1.4509 0-2.391 1.2364-0.87873 1.1648-0.87873 2.769 0 0.95025 0.4598 1.9005 0.38828 0.8072 0.97069 1.3692 0.69481-1.032 1.0831-1.6042 0.62328-0.9196 1.0626-1.5429 0.56198-0.79699 1.124-1.594 0.55176-0.85829 0.55176-1.3079z"/>
            <path d="m96.746 42.296q0 1.6144-1.3998 2.6464-1.3079 0.97069-3.1164 0.97069-1.5327 0-2.5442-0.50067-1.2364-0.61307-1.2364-1.8085 0-0.90938 0.66416-1.5327 0.67437-0.6335 1.6042-0.6335 0.96047 0 1.5633 0.3474 0.68459 0.39849 0.68459 1.124 0 0.4598-0.33719 0.8072-0.32697 0.33719-0.78677 0.33719-0.43936 0-0.6335-0.16348-0.05109-0.05109-0.05109-0.08174 0-0.07152 0.13283-0.10218 0.1737-0.06131 0.2861-0.21457 0.12261-0.15327 0.12261-0.48024 0-0.29632-0.31675-0.48024-0.31675-0.19414-0.68459-0.19414-0.72546 0-1.2261 0.3474-0.49045 0.3474-0.49045 0.96047 0 0.85829 1.0933 1.3283 0.90938 0.38828 2.156 0.38828 1.2977 0 2.2683-0.58241 1.1444-0.68459 1.1444-1.8494 0-1.1648-0.83786-1.7268-0.52111-0.3474-1.9822-0.70503-0.83786-0.18392-1.6655-0.37806-0.94004-0.25544-1.3794-0.66416-0.5722-0.53132-0.5722-1.4918 0-1.0933 1.1546-1.8085 1.0626-0.66416 2.442-0.66416 1.2466 0 2.0129 0.31675 1.0116 0.41893 1.0116 1.2977 0 0.56198-0.54154 0.92982-0.50067 0.33719-1.1546 0.33719-0.62328 0-1.0422-0.23501-0.51089-0.2861-0.51089-0.81742 0-0.27588 0.18392-0.48024 0.19414-0.21457 0.42915-0.2861 0.10218-0.02044 0.1124-0.02044 0.07152 0 0.07152 0.10218l-0.02044 0.20436q0 0.22479 0.14305 0.36784 0.18392 0.18392 0.59263 0.18392 0.26566 0 0.4598-0.18392t0.19414-0.42915q0-0.4598-0.66416-0.65394-0.49045-0.14305-1.2772-0.14305-0.98091 0-1.7677 0.43936-0.86851 0.49045-0.86851 1.2159 0 0.65394 0.5722 1.0218 0.35762 0.23501 2.2888 0.67437 1.1955 0.27588 1.8392 0.53132 0.89916 0.35762 1.3487 0.87873 0.53132 0.61307 0.53132 1.5531z"/>
        </g>
    </g>
</svg>

PS: The text of the SVG has been converted in several paths to prevent some browsers from changing the font of the letters at will.

html

1 Answers

  1. Best Answer

    I managed to find a way to do it. In the event that you want to animate several pathtogether, you need to group them in an element <g>and assign an id to the latter, which will receive the animation.

    <g id="paths">
    <path d="..."/>
    <path d="..."/>
</g>

    To make the horizontal movement it is necessary to modify the attribute translatein the element <g>and to make the animation we will use @keyframes, everything would be as follows:

    @keyframes moveleft{            
    0% {transform: translate(40px,0)}
    100% {transform: translate(0,0)}
}

#paths{
    animation-name: moveleft;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    animation-duration: 3s
}
    <svg width="400" height="400" version="1.1" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="paths" fill="black" stroke-width="1.2072" aria-label="ontes">
        <path d="m58.879 40.763q0 2.1457-1.5735 3.6682-1.5327 1.4816-3.6171 1.4816-2.1968 0-3.7091-1.5224-1.502-1.5327-1.502-3.7295 0-2.1355 1.5327-3.6477 1.5429-1.5224 3.6988-1.5224 2.1662 0 3.6682 1.5429t1.502 3.7295zm-0.87873 0.44958q0-1.6859-1.5531-3.2084-1.6042-1.5735-3.5149-1.5735-1.4918 0-2.534 1.0218t-1.0422 2.4114q0 2.0129 1.5838 3.5762 1.5531 1.5327 3.423 1.5327 1.4816 0 2.5136-0.96047 1.124-1.0524 1.124-2.7997z"/>
        <path d="m69.649 39.312q0 1.5122-0.53132 2.9018-0.53132 1.3794-1.5735 2.5544 0.03065 0 0.10218 0.01022 0.08174 0 0.21457 0 0.31675 0 0.59263-0.03065 0.27588-0.04087 0.54154-0.21457 0.26566-0.21457 0.3474-0.27588 0.02044-0.02044 0.06131-0.03065 0.03065-0.01022 0.04087-0.01022 0.1124 0 0.06131 0.18392-0.02044 0.15327-0.04087 0.36784-0.02044 0.21457-0.02044 0.2861 0 0.15327 0.01022 0.32697 0.01022 0.16348 0.03065 0.3474 0.04087 0.20436-0.08174 0.20436-0.05109 0-0.10218-0.04087-0.30653-0.1737-0.42915-0.22479-0.23501-0.09196-0.44958-0.12261-0.20436-0.03065-0.64372-0.03065-0.29632 0-0.47002 0.01022t-0.4598 0.06131q-0.29632 0.05109-0.29632-0.18392 0-0.07153 0.03065-0.12261 0.55176-0.85829 0.85829-1.4203 0.48024-0.88895 0.71524-1.6553 0.2861-0.94004 0.2861-1.9107 0-1.6042-0.71524-2.6055-0.7459-1.0524-2.0231-1.0524-0.85829 0-1.5429 0.48024-0.61307 0.42915-1.0116 1.1955v6.2737q0 0.18392 0.22479 0.37806 0.19414 0.16348 0.38828 0.31675 0.1124 0.1124 0.1124 0.20436 0 0.10218-0.1737 0.10218-0.05109 0-0.4598-0.03065t-0.7459-0.03065q-0.38828 0-0.62328 0.02044-0.22479 0.02043-0.52111 0.04087-0.24523 0-0.24523-0.1124 0-0.07152 0.09196-0.1737t0.29632-0.26566q0.3474-0.26566 0.3474-0.44958v-6.0489q0-0.86851-0.52111-1.4101-0.22479-0.23501-0.78677-0.53132-0.08174-0.04087-0.08174-0.1124 0-0.07152 0.06131-0.13283 0.13283-0.12261 0.22479-0.19414 0.09196-0.08174 0.23501-0.22479t0.22479-0.23501 0.15327-0.18392q0.04087-0.05109 0.1124-0.05109 0.06131 0 0.09196 0.03065 0.36784 0.29632 0.77655 0.82764 0.56198 0.72546 0.65394 1.2568 0.44958-0.73568 1.0933-1.2772 0.96047-0.8072 1.9516-0.8072 1.8392 0 2.8303 1.3794 0.78677 1.0933 0.78677 2.442z"/>
    </g>          
</svg>

    • 1