Как сохранить отображение svg path после проигрывания анимации?
Намучалась с анимацией пунктирной фигуры.
При загрузке прорисовывается линия, но после завершения проигрывания анимации - пунктирная линия пропадает.
Как сохранить отображение пунктирной фигуры после прорисовки?
https://codepen.io/Sokolovskaya/pen/XWORVVo
Дополнительно:
Ответы:
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
сделать изначально stroke-dashoffset: 0;
пример
.c-dashed-line__path { animation: c-dashed-line-path 3s ease-in-out ; fill: none; stroke: #fff; stroke-dasharray: 241; /* this is the entire length of the line */ stroke-dashoffset: 0; /* this is the entire length of the line */ stroke-width: 2; } @keyframes c-dashed-line-path { 0% { stroke-dashoffset:241; } 100% { stroke-dashoffset:0; } } |
.c-dashed-line__path { animation: c-dashed-line-path 3s ease-in-out ; fill: none; stroke: #fff; stroke-dasharray: 241; /* this is the entire length of the line */ stroke-dashoffset: 0; /* this is the entire length of the line */ stroke-width: 2; } @keyframes c-dashed-line-path { 0% { stroke-dashoffset:241; } 100% { stroke-dashoffset:0; } }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сохранить отображение SVG path после проигрывания анимации, можно использовать CSS свойство `animation-fill-mode`. Это свойство определяет, какие стили должны применяться к элементу до и после проигрывания анимации.
Пример кода на CSS:
svg path { animation: myAnimation 2s forwards; } @keyframes myAnimation { from { fill: red; } to { fill: blue; } }
В данном примере, анимация `myAnimation` будет изменять цвет заливки (fill) пути (path) внутри SVG элемента. С помощью `animation-fill-mode: forwards;` мы говорим браузеру сохранить последнее значение анимации после её завершения.
Таким образом, после проигрывания анимации путь будет оставаться в состоянии, установленном в конце анимации (синий цвет заливки в данном случае).
Не забудьте также добавить вендорные префиксы для кроссбраузерной поддержки анимации в вашем CSS коде, если необходимо.
Надеюсь, данное объяснение поможет вам сохранить отображение SVG path после проигрывания анимации. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!