SVG анимация по диагонали - PullRequest
Новая
       16

SVG анимация по диагонали

0 голосов
/ 28 мая 2019

Я хочу иметь возможность создать такой дизайн:

https://www.reddit.com/r/webdev/comments/bromkj/ello_everyone_this_is_a_ui_i_made_in_adobe_xd/

Вы можете найти мой сайт по адресу: https://desertsunstudio.com

Это базовая настройкаимеет два фиксированных SVG на разных z-индексах поверх оранжевого HTML и тела. 

html, body{
  margin: 0;
  padding: 0;
  font-family: "Oxygen", "Arial", sans-serif;
  background-color: #A36D00;
} 

#left-panel{
  position: fixed;
  z-index: 3;
  animation-name: left-panelmove;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

#right-panel{
  position: fixed;
  z-index: 4;
  animation-name: right-panelmove;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

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

@keyframes right-panelmove {
    from {transform: translate(0, 0);}
    to {transform: translate(15%, 10%);}
}

@keyframes left-panelmove {
    from {transform: translate(0, 0);}
    to {transform: translate(-15%, -10%);}
}

Однако вы можете видеть, что мой черный квадрат на SVG гораздо больше артборда.

svgs on artboards

svgs on artboards

Мне было интересно, могу ли я что-нибудь сделать с этим кодом, чтобы SVG работал по диагонали по всему экрану, особенно в окне просмотра: 

<svg version="1.1" id="ab9dac86-5d7c-460b-b35e-9ae3db46aedc"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 1080"
     style="enable-background:new 0 0 1920 1080;" xml:space="preserve">

1 Ответ

0 голосов
/ 29 мая 2019 
@keyframes right-panelmove {
    from {transform: translate(0, 0);}
    to {transform: translate(15%, 10%);}
}

@keyframes left-panelmove {
    from {transform: translate(0, 0);}
    to {transform: translate(-15%, -10%);}
}

.left-panelmove{
  animation-name: left-panelmove;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

.right-panelmove{
  animation-name: right-panelmove;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-delay: 500ms;
}

Я переместил @keyframes и класс в соответствующий SVG (слева и справа) внутри тега стиля SVG, и он отлично работал.

...