ку. пытаюсь догнать, как развернуть анимацию в обратную сторону, ведь значение атрибутов идёт слева направо, а мне нужно, что бы анимация работала справа налево.
<!DOCTYPE html>
<html>
<head>
<title>sharingun</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
.anim-shape {
-webkit-transform: scale(0, 1) translate(0, 0);
transform: scale(0, 1) translate(0, 0);
-webkit-animation: moving-panel 2s linear forwards;
animation: moving-panel 2s linear forwards infinite;}
@-webkit-keyframes moving-panel {
100% {
-webkit-transform: scale(1, 1) translate(8px, 0);
transform: scale(1, 1) translate(8px, 0);
}
}
@keyframes moving-panel {
100% {
-webkit-transform: scale(1, 1) translate(8px, 0);
transform: scale(1, 1) translate(8px, 0);
}
}
</style>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-350 -200 2200 300" version="1.1">
<style>
svg{
fill:rgb(120,230,150);
}
</style>
<clippath id="hori_panel">
<rect x="100" y="5" width="300" height="100"/>
<rect x="410" y="5" width="300" height="100"/>
</clippath>
<g clip-path="url(#hori_panel)">
<rect width="40%" height="40%" class="anim-shape">/rect>
</g>
</svg>
</body>
</html>
