LINUX.ORG.RU

svg mask animate

 , ,


0

1

ку. пытаюсь догнать, как развернуть анимацию в обратную сторону, ведь значение атрибутов идёт слева направо, а мне нужно, что бы анимация работала справа налево.

<!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>


ориджин такой ориджин

.anim-shape {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
/thread

ghett ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.