Анимация CSS, точно так же, как и фильтры , градиенты появились намного позже, чем аналогичные разделы в SVG.
И до настоящего момента в CSS не реализовано в полной мере всё то, что возможно сделать в SVG.
Например анимацию кривых Безье, как и других кривых, возможно реализовать только с помощью SMIL SVG.
Правда в последнее время Chrome
пытается реализовать это. Но пока это, всего лишь экспериментальные технологии, которые не задокументированы в W3C
и поэтому, эти решения не кроссбраузерны.
Пример анимации кривых Безье
Более интересно выглядит в полно экранном режиме
Анимация ссылки в форме волны
<style>
svg {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hawaii-beach.jpg);
background-size:cover;
width:50%
height:50%
}
</style>
<svg viewBox="0 0 650 500">
<defs>
<path id="Lsvg" d="M100 200Q200,200 300,200 T500,200" style="stroke:teal;fill-opacity:0.3;stroke-width:3;fill:none">
<animate begin="0.5s" dur="10s" restart="whenNotActive" attributeName="d"
values="M100 200Q200,200 300,200 T500,200;
M100 200Q200,100 300,200 T500,200;
M100 200Q200,200 300,200 T500,200;
M100 200Q200,300 300,200 T500,200;
M100 200Q200,200 300,200 T500,200"/>
</path>
</defs>
<text text-anchor="middle" font-size="25" fill="#026282">
<textPath id="result" method="align" spacing="auto" startOffset="50%" xlink:href="#Lsvg"><tspan dy="-20">So easy to do with SVG just few lines</tspan></textPath>
<animate
begin="animLink.mouseover"
dur="10s"
repeatCount="indefinite"
attributeName="fill"
values="red;green;red;green;red"/>
</text>
<use xlink:href="#Lsvg" transform="translate(0 -10)"/>
<rect id="animLink" x="100" y="150" width="400" height="60" fill="#E0E0E0" fill-opacity="0.01" stroke="none" />
</svg>
</body>
</html>
Ещё один пример анимации атрибута d
у path
- Анимация SVG работает во всех современных браузерах, кроме
IE
,
Edge
- В CSS работает только в экспериментальных технологиях
Chrome
Преобразование иконки Wordpress
- Twitter
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="126" height="126" viewBox="0 0 126 126" >
<path id="wordpress" fill="none" stroke="black" stroke-dasharray="1150" stroke-dashoffset="0" d="M113.5 57.7l-8.5-11.4 -2.5-14c-0.8-4.3-4.3-7.7-8.6-8.3L79.8 22.1l-11.7-8.1c-2.9-2-6.6-2.4-9.9-1 -0.7 0.3-1.4 0.7-2 1.2l-11.4 8.5 -14 2.5c-0.8 0.1-1.5 0.4-2.3 0.7 -3.2 1.4-5.5 4.4-6 7.9L20.5 48l-8.1 11.7c-2.5 3.6-2.4 8.4 0.2 12l8.5 11.4 2.5 14c0.8 4.3 4.3 7.7 8.6 8.3l14.1 2 11.7 8.1c2.9 2 6.7 2.4 9.9 1 0.7-0.3 1.4-0.7 2-1.2l11.4-8.5 14-2.5c0.8-0.1 1.5-0.4 2.3-0.7 3.2-1.4 5.5-4.4 6-7.9l2-14.1 8.1-11.7C116.3 66 116.2 61.2 113.5 57.7M63.1 102c-20.6 0-37.4-16.8-37.4-37.4s16.8-37.4 37.4-37.4 37.4 16.8 37.4 37.4S83.7 102 63.1 102 M63.7 67.6L53.5 97.3c3.1 0.9 6.3 1.4 9.6 1.4 4 0 7.8-0.7 11.3-1.9 -0.1-0.1-0.2-0.3-0.2-0.5L63.7 67.6M80.2 94.1c10.1-5.9 16.9-16.9 16.9-29.5 0-5.9-1.5-11.5-4.2-16.4 0.2 1.1 0.2 2.3 0.2 3.5 0 3.5-0.6 7.3-2.6 12.2L80.2 94.1M29 64.6c0 13.5 7.8 25.2 19.2 30.7L31.9 50.8C30.1 55 29 59.7 29 64.6M86.1 62.9c0-4.2-1.5-7.1-2.8-9.4 -1.7-2.8-3.3-5.2-3.3-8 0-3.1 2.4-6 5.7-6 0.1 0 0.3 0 0.4 0 -6.1-5.6-14.1-9-23-9 -11.9 0-22.4 6.1-28.5 15.4 0.8 0 1.6 0 2.2 0 3.6 0 9.1-0.4 9.1-0.4 1.8-0.1 2.1 2.6 0.2 2.8 0 0-1.8 0.2-3.9 0.3l12.4 36.9 7.5-22.4L56.8 48.7c-1.8-0.1-3.6-0.3-3.6-0.3 -1.8-0.1-1.6-2.9 0.2-2.8 0 0 5.6 0.4 9 0.4 3.6 0 9.1-0.4 9.1-0.4 1.8-0.1 2.1 2.6 0.2 2.8 0 0-1.8 0.2-3.9 0.3l12.3 36.6 3.4-11.4C85.2 69.5 86.1 65.8 86.1 62.9">
<animate
attributeName="fill"
begin="0s"
values="black;white"
dur="2s"
fill="freeze" />
<animate
attributeName="stroke-dashoffset"
begin="2s"
values="0;1150"
dur="2s"
fill="freeze" />
</path>
<path id="twitter" fill="none" stroke="black" stroke-dasharray="948" stroke-dashoffset="948" d="M113.5 57.6l-8.5-11.4 -2.5-14c-0.8-4.3-4.3-7.7-8.6-8.3L79.8 21.9l-11.7-8.1c-2.9-2-6.6-2.4-9.9-1 -0.7 0.3-1.4 0.7-2 1.2l-11.4 8.5 -14 2.5c-0.8 0.1-1.5 0.4-2.3 0.7 -3.2 1.4-5.5 4.4-6 7.9l-2 14.1 -8.1 11.7c-2.5 3.6-2.4 8.4 0.2 12l8.5 11.4 2.5 14c0.8 4.3 4.3 7.7 8.6 8.3l14.1 2 11.7 8.1c2.9 2 6.7 2.4 9.9 1 0.7-0.3 1.4-0.7 2-1.2l11.4-8.5 14-2.5c0.8-0.1 1.5-0.4 2.3-0.7 3.2-1.4 5.5-4.4 6-7.9l2-14.1 8.1-11.7C116.3 65.9 116.2 61.1 113.5 57.6zM63.1 101.9c-20.6 0-37.4-16.8-37.4-37.4 0-20.6 16.8-37.4 37.4-37.4s37.4 16.8 37.4 37.4C100.4 85.1 83.7 101.9 63.1 101.9zM63.1 30.7c-18.7 0-33.8 15.2-33.8 33.8 0 18.7 15.2 33.8 33.8 33.8 18.7 0 33.8-15.2 33.8-33.8C96.9 45.9 81.7 30.7 63.1 30.7zM78.5 85.4c-2.1 1-4 1.7-5.7 2.1s-3.5 0.6-5.5 0.6c-2.2 0-3.6-0.3-5.3-0.8 -1.7-0.6-3.2-1.4-4.4-2.4 -1.2-1.1-2.1-2.2-2.5-3.4 -0.5-1.2-0.7-2.9-0.7-5.2V59.1h-6.7v-7c1.9-0.6 4.2-1.5 5.6-2.7 1.4-1.2 2.5-2.6 3.3-4.2 0.8-1.6 1.4-3.7 1.7-6.3h7v11.4h11.4v8.8H65.2v12.6c0 2.9 0 4.5 0.3 5.3 0.3 0.8 1.1 1.6 1.9 2.1 1.1 0.7 2.3 1 3.7 1 2.5 0 5-0.8 7.4-2.4V85.4z">
<animate id="tw"
attributeName="stroke-dashoffset"
begin="3s"
values="948;0"
dur="3s"
fill="freeze" />
<animate
attributeName="fill"
begin="tw.end-1s"
values="white;black"
dur="2s"
fill="freeze" />
</path>
</svg>
Второе важное отличие анимаций CSS vs SVG - организация тайминга , расчета времени запуска, продолжения, очередности последовательных и параллельных анимаций
В CSS надо точно рассчитывать и подгонять начало нескольких анимаций
Стандартный прием, - устанавливать для каждой анимации время задержки delay
для второй анимации и последующих анимаций.
Но если изменится алгоритм, придётся всё пересчитывать заново. Сделать это для большого количества анимаций, очень трудоёмко.
Ниже простой пример для расчёта delay
, но представьте, если бы логика запуска анимаций была не последовательная, как в примере, а намного сложнее, то тогда расчет тайминга увеличился бы по сложности в геометрической прогрессии и объем кода тоже бы сильно возрос.
path {
stroke: #ccc;
stroke-width: 5px;
animation: appear .3s 1;
animation-fill-mode: forwards;
}
path:nth-child(1),
path:nth-child(2) { animation-delay: .1s }
path:nth-child(3) { animation-delay: .2s }
path:nth-child(4) { animation-delay: .3s }
path:nth-child(5) { animation-delay: .4s }
path:nth-child(6) { animation-delay: .5s }
path:nth-child(7) { animation-delay: .6s }
g{fill:none;animation: fill 1s 1 .7s forwards; }
@keyframes appear {
from { opacity:0; }
to { opacity:1; }
}
@keyframes fill {
from { fill: none; }
to { fill: #f00; }
}
<svg viewBox="0 0 120 30">
<g>
<path d="M10,11h8v8h-8z"/>
<path d="M25,11h8v8h-8z"/>
<path d="M40,11h8v8h-8z"/>
<path d="M55,11h8v8h-8z"/>
<path d="M70,11h8v8h-8z"/>
<path d="M85,11h8v8h-8z"/>
<path d="M100,11h8v8h-8z"/>
</g>
</svg>
<style>
path {
stroke: #ccc;
stroke-width: 5px;
animation: appear .3s 1;
animation-fill-mode: forwards;
}
path:nth-child(1),
path:nth-child(2) { animation-delay: .1s }
path:nth-child(3) { animation-delay: .2s }
path:nth-child(4) { animation-delay: .3s }
path:nth-child(5) { animation-delay: .4s }
path:nth-child(6) { animation-delay: .5s }
path:nth-child(7) { animation-delay: .6s }
g{fill:none;animation: fill 1s 1 .7s forwards; }
@keyframes appear {
from { opacity:0; }
to { opacity:1; }
}
@keyframes fill {
from { fill: none; }
to { fill: #f00; }
}
</style>
<svg viewBox="0 0 120 30">
<g>
<path d="M10,11h8v8h-8z"/>
<path d="M25,11h8v8h-8z"/>
<path d="M40,11h8v8h-8z"/>
<path d="M55,11h8v8h-8z"/>
<path d="M70,11h8v8h-8z"/>
<path d="M85,11h8v8h-8z"/>
<path d="M100,11h8v8h-8z"/>
</g>
</svg>
SMILL SVG в реализации алгоритмов анимации намного мощнее и гибче
Расчет тайминга, как в CSS, но есть очень полезные отличия:
- Время запуска для определенной анимации
begin="1s"
(как в CSS)
- Несколько запусков одной анимации в разные период времени - `begin="1s;7s;15;59s"
Создание логических цепочек запуска
Не надо ничего рассчитывать, логику можно поменять в любой момент настройки приложения.
Можно написать так - begin="an.end+5s"
- это означает, что
данная анимация начнется через 5 секунд после окончания анимации - id="an"
begin="an2.begin+5s"
- запуск анимации через 5s
после запуска анимации c id="an2"
, такое условие можно написать для одной или нескольких анимаций
end="an2.end+1s"
- окончание данной анимации, через 1s после окончания анимации с id="an2
Для одной анимации можно писать два условия начала - begin
и окончания end
Также можно повторить одну анимацию несколько раз repeatCount="5"
или запустить анимацию после нескольких повторов предыдущей анимации begin="an3.repeat(10)"
Можно сделать паузу в выполнении анимации и вновь её запусить - с помощью повторения значений values="0;1850;1850;0"
Ниже пример последовательно-параллельных анимаций SVG
Последовательно рисуется тело, глаз. Параллельно рисуются усики крыски, после окончания рисования глаза
var btn = document.getElementById('btn1');
btn.addEventListener("click",() =>{
an_body.beginElement();
})
<div><button id="btn1">Click me</button></div>
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet">
<style>
.s0{
fill:none;
stroke:black;
stroke-width:5;
}
#mustache_1,#mustache_2,#mustache_3 {
stroke-width:3;
}
</style>
<rect width="100%" height="100%" fill="#D6DFE6" />
<path id="body" class="s0" stroke-dasharray="0 2482" d="m228.8 142c0 0-1 9.2 1.5 12.7 6.9 9.7 20.4 13.6 32.2 15.7 13.1 2.3 27.1 0.1 39.7-4.1 13.2-4.4 24.9-12.8 36-21.3 5.6-4.3 10.6-9.5 15-15 4.6-5.8 9.8-11.6 12-18.7 2.2-7 3.3-14.4 0.7-22.1C360.6 72.7 351.5 65 340.9 56.1 326.1 43.9 308.2 34.5 289.5 30.3c-19.5-4.4-40.4-2.6-59.9 1.5-20.1 4.2-39.6 12.3-56.9 23.2-24.2 15.3-46.2 35-63.7 57.7-18.9 24.5-34 52.7-42.7 82.4-7.7 26.3-10.4 54.7-7.5 82 4.4 41.8 18.8 62.2 37.5 88.1 11.1 15.3 27 26.8 42.7 37.5 13.2 9 27.5 16.8 42.7 21.7 13.5 4.4 27.8 5.4 41.9 6.7 27 2.5 81.3 2.2 81.3 2.2l74.9-0.7c0 0 33.9-0.2 49.4-1 9.3-0.5 13-14.3 15.7-23.2 2.8-9.1 2.3-19.3 0-28.5-2.7-11-8.6-21.2-15.7-30-6.3-7.8-14.8-13.8-23.2-19.3-12.1-7.8-25.1-14.7-39-18.9-12.5-3.8-25.9-5.4-39-5.2-17.9 0.2-35.9 3.4-53.2 8.2-4.7 1.3-13.4 5.5-13.4 5.5 0 0 13.4-17.7 21.2-25.6 9.3-9.4 19.6-18 30.4-25.7 13-9.1 26.8-17.3 41.2-23.9 13.8-6.3 27.9-12.8 42.9-15 18.2-2.7 37.5-2.3 55.2 2.6 14.2 3.9 27.1 12.3 39 21 10.4 7.6 18.8 17.6 27.7 27 7.9 8.3 13.3 24.3 10.5 36.7-2.1 9.1-10.1 17.4-18.7 21-9 3.8-21.6 4.6-29.2-1.5-8.2-6.7-9.4-20.2-8.2-30.7 1.4-12.3 8.8-23.9 17.2-33 8.4-9 19.4-16.7 31.5-19.5 11.7-2.7 25.2-1.6 36 3.7 8.9 4.4 15.6 13 20.2 21.7 4.6 8.6 6.8 19.4 6.7 28.5 0 9.5-16.5 23.2-16.5 23.2 0 0 19.8 2.8 29.2 6 9.7 3.3 19.2 7.6 27.5 13.5 9.6 6.9 17.6 15.9 24.9 25.2 4.7 5.9 11.9 19 11.9 19l9 18c0 0 0.7 15.9 6.7 18.7 3.9 1.8 11.1-0.3 12-4.5 0.4-1.7-2.1-3-3.7-3.7-2.3-1.1-5.1-1.6-7.5-0.7-3.3 1.2-7.5 7.5-7.5 7.5h-26.2l-43.9 0.9c0 0-14.8-0.4-22.2-0.4-13.2-0.1-26.6-0.3-39.7 0.2-16.9 0.6-34.3-0.6-53.8 0.1-15.7 0.5-51.6 0.5-51.6 0.5" >
<animate id="an_body" attributeName="stroke-dasharray" dur="4s" begin="indefinite" values="0 2482;2482 0" fill="freeze" restart="whenNotActive" />
</path>
<path id="eye" class="s0" stroke-dasharray="0 43" d="m570.4 371.6c0 0 5.3-5.3 8.5-7.2 2.9-1.7 6.1-3.4 9.5-3.7 3.6-0.3 7.5 0.5 10.7 2.3 3.1 1.7 7.4 7.5 7.4 7.5" >
<animate id="an_eye" attributeName="stroke-dasharray" dur="1s" begin="an_body.end" values="0 43;43 0" fill="freeze" restart="whenNotActive" />
</path>
<path id="mustache_1" class="s0" stroke-dasharray="0 110" d="m542.9 462c2.5-8 7-15.1 10.7-22.5 2.5-4.9 5.2-9.7 7.7-14.7 1.2-2.5 2.2-5.1 3.6-7.5 0.6-1.1 1.1-2.1 2-3.2 0.2-0.3 0.5 0.6 0.4 0.9-1 4.9-2.3 8.2-3.8 12.2-1.3 3.4-3.1 6.6-4.8 9.8-1.2 2.3-2.4 4.6-3.6 6.9-1.1 2-2.2 4.1-3.3 6.1-2.2 4-4.6 9-6.8 11.8-1.9 2.4-2.3 0.9-2.1 0.3z" >
<animate id="an_mustache_1" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end"
values="0 110;110 0" fill="freeze" restart="whenNotActive" />
</path>
<path id="mustache_2" class="s0" stroke-dasharray="0 157" d="m589.1 412.5c-1 3.9-0.4 9.7-1.1 14.6-0.8 5.5-2.3 10.9-3.4 16.4-1.2 6-2.7 11.9-3.7 17.9-1.1 6.4-2.4 12.8-2.6 19.3-0.1 1.9-0.3 7.3 0.3 5.6 1.5-5 1.7-7.7 2.6-11.6 1.3-5.6 2.9-11.1 4.3-16.6 1.3-5.2 2.6-10.3 3.5-15.5 0.5-2.8 0.9-5.6 1.2-8.3 0.4-3.7 0.9-7.3 1.1-11 0.2-3.7-0.2-7.1-0.1-11.3 0.1-3.8-1.5-1.6-2 0.5z" >
<animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end"
values="0 157;157 0" fill="freeze" restart="whenNotActive" />
</path>
<path id="mustache_3" stroke-dasharray="0 159" class="s0" d="m608.2 408.4c-0.2 4.1 0.6 6.9 1.3 10.3 0.5 2.4 1.4 4.7 2 7 1.3 5.6 1.8 11.4 3.2 16.9 1.5 6.2 3.7 12.2 5.6 18.3 2.4 7.7 4.1 15.7 7.4 22.9 0.2 0.4 1.3 0.3 1.3-0.1-0.3-5.6-1.2-6.9-1.9-10.3-1.2-6.1-2.3-12.3-3.7-18.4-0.9-4-2-7.9-3.2-11.8-0.9-2.9-2-5.6-2.9-8.5-1-3.1-2.1-6.2-3-9.4-1.6-5.4-2.3-9.6-4.5-16.2-0.2-0.6-1.6-1.4-1.6-0.8z">
<animate id="an_mustache_2" attributeName="stroke-dasharray" dur="1s" begin="an_eye.end"
values="0 159;159 0" fill="freeze" restart="whenNotActive" />
</path>
</svg>
Недостаток у SMIL SVG анимаций один, браузеры в отличии от CSS
не кешируют процесс анимаций. Поэтому анимации CSS работают более гладко по сравнению с SVG.
Note
Не стоит смешивать в одном файле анимации CSS и SMIL. Анимации могут идти рывками. Точно те же анимации по отдельности работают прекрасно, если сделаны чисто в SVG или CSS/
Какие преимущества есть у CSS анимации перед SMIL SVG?
- При трансформациях SVG:
scale
, skew
необходимо учитывать, что начало координат находится в левом верхнем углу холста и при увеличении, например в 2 раза scale(2)
это расстояние тоже увеличится в два раза и элемент сдвинется вправо и вниз. Поэтому его необходимо возвращать на место с помощью translate(x,y)

- При вращении SVG -
rotate(angle, x.y)
кроме угла необходимо указывать координаты центра фигуры. Что бывает довольно проблематично или необходимо определить его с помощью JS getBBox()
С введением в CSS правил :
transform-origin` и transform-box эти проблемы SVG решаются очень просто.
- Кроме того в SMIL анимация жестко привязывается только к одному объекту.
в CSS с этим тоже нет проблем,- одна анимация может быть привязана к одному или нескольким объектам, имеющим одинаковый класс, например class="my-spin"
Посмотрите пример ниже, где разные элементы вращаются одной анимационной командой и центр вращения определяется автоматически для каждой фигуры.
.my-spin {
transform-box: fill-box;
animation: spin 2s linear infinite;
transform-origin:50% 50%;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<svg xmlns="http://www.w3.org/2000/svg" width="1800" height="1200" viewBox="500 150 951.7 589.2"
style="border:1px solid red">
<polygon id="star" class="my-spin" points="567 156.1 568.7 159.6 572.6 160.2 569.8 162.9 570.5 166.8 567 165 563.5 166.8 564.2 162.9 561.4 160.2 565.3 159.6" fill="#F70606"/>
<polygon class="my-spin" points="694.3 183.6 696 187 699.7 187.5 697 190.2 697.7 193.9 694.3 192.1 690.9 193.9 691.6 190.2 688.9 187.5 692.6 187" fill="#F70606" stroke="#E20000" stroke-miterlimit="10" stroke-width=".6338"/>
<polygon class="my-spin" points="522 296.2 523.9 300 528 300.6 525 303.5 525.7 307.6 522 305.7 518.4 307.6 519.1 303.5 516.1 300.6 520.2 300" fill="#F70606"/>
<polygon class="my-spin" points="644.7 375.8 646.3 379.1 649.9 379.6 647.3 382.2 647.9 385.8 644.7 384.1 641.5 385.8 642.1 382.2 639.5 379.6 643.1 379.1" fill="#F70606"/>
<polygon class="my-spin" points="700 250 750 200 800 250" fill="green"/>
<rect class="my-spin" fill="purple" x="600" y="190" width="40" height="60" />
</svg>