Анимация в Masterscada 4D

[box210277]

В продолжение темы анимации, мой друг посмотрел на все это хозяйство сказал ну его нафиг, будем делать все через CSS. В итоге SVG приобрел такой вид:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="60" height="60" version="1.1" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
  <![CDATA[ 
	#rectangle {
		width:40px;
		height:40px;
    }
    #rectangle.Start{
       -webkit-animation: shakeY 2s infinite linear;
    }
	@keyframes shakeY {
		from,
		to {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		   }
 
		10%,
		30%,
		50%,
		70%,
		90% {
			-webkit-transform: translate3d(0, -10px, 0);
			transform: translate3d(0, -10px, 0);
			}
 
		20%,
		40%,
		60%,
		80% {
			-webkit-transform: translate3d(0, 10px, 0);
			transform: translate3d(0, 10px, 0);
    }
	}
    ]]>
  </style>
  <g id="rectangle">
	<rect x="10" y="10" width="40" height="40" fill="none" stroke="#070707" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/>
  </g>
</svg>

Сама прыгалка shakeY найдена на просторах интернета, немного поправим XMLку:

<?xml version="1.0"?>
<SvgDef xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" CreateCommonAvary="false">
  <ParameterDefs>
    <ParameterDef Name="Jump" DisplayName="Прыгать" Type="STRING" ParamType="Attribute" ItemId="rectangle" Path="class">
      <Value DisplayName="Выкл">Stop</Value>
      <Value DisplayName="Вкл">Start</Value>
    </ParameterDef>
  </ParameterDefs>
</SvgDef>

Ну и далее все как обычно Новое окно, Импорт SVG, вставляем куда нужно, привязываем параметр. И вуаля.

[melky]

В отличии от первоначального варианта в браузере ничего не попрыгало...

[box210277]

melky

Чтобы в обычном браузере посмотреть надо поправить
<g id="rectangle">

на

<g id="rectangle" class="Start">


Так как этот класс дергается через xml Masterscada'ой. Тогда при открытии браузером квадрат будет прыгать.