@media screen and ( max-width: 700px ) {
  .kells3 {
    display: block;
  }
  .background {
    fill: #93A600;
    opacity: 0.57;
  }
  .mid-hide { display: none; }
  .bridge { transform: translateX(15px); }
}

Создание Это Fluid

В этот момент ширина и высота будут удалены из SVG, и мы можем добавить в preserveAspectRatio="xMidYMid meet" (хотя это по умолчанию, так что это не является строго необходимым), чтобы сделать SVG жидкость.С этими изменениями, он будет регулировать по размеру контейнера вместо, который мы устанавливаем на основе процентах.Flex или любой другой контейнер реагировать будет работать здесь.

.initial { 
  width: 50%;
  float: left;
  margin: 0 7% 0 0;
}

Viewbox Trick

Существует одна загвоздка и вы, возможно, уже догадались.Даже если мы назначим нижний слой класса и спрятать его, будет пустой промежуток, где ViewBox по-прежнему приходится этом пространстве.Мы можем изменить Viewbox в SVG, чтобы показать только верхнюю часть:

viewBox="0 0 490 474" 

И что будет делать трюк … для двух более крупных версий.Маленький версия теперь закрыт, а ViewBox предоставляет что-то окно в другой части спрайта листа SVG, поэтому мы должны настроить его.Изменение Viewbox на основе переключения видовом, мы будем использовать немного JavaScript:

var shape = document.getElementById("svg");

// media query event handler
if (matchMedia) {
        var mq = window.matchMedia("(min-width: 500px)");
        mq.addListener(WidthChange);
        WidthChange(mq);
}
// media query change
function WidthChange(mq) {
        if (mq.matches) {
    shape.setAttribute("viewBox", "0 0 490 474");
    shape.setAttribute("enable-background", "0 0 490 474");
        }
        else {
    shape.setAttribute("viewBox", "0 490 500 500");
    shape.setAttribute("enable-background", "0 490 500 500");
        }
};

Теперь, когда мы прокручиваем окно браузера по горизонтали, видовой сместится для отображения только часть SVG мы хотим, чтобы разоблачить.Наш код теперь загрунтовать и готовы к анимации .

Время Для Animate

Если вы экспорта из Illustrator как я, это будет объяснить тот факт, что у вас есть много «гора» классы, “точечные” классы, и т.д., и количество их для вас: “гора”, “mountain_2_” итак далее.Хорошая вещь об именовании всех этих групп правильно, что мы можем последовательно использовать ту же анимацию по массивуспрайтов.Для целевой все «горных» классов, мы можем использовать CSS attributeStartsWith селектор (я изменил дефолт Иллюстратор идентификаторов классов)

[class^="mountain"], [class^="grass"] {
  animation: slant 9s ease-in-out infinite both;
  transform: skew(2deg);
}

Вы увидите здесь, что мы начинаем с transform установить на этом элементе: это держит ключевым кадрам анимации кратким.Анимация будет предположить, что 0% ключевой кадр соответствует начальному состоянию элемента;Все, что необходимо определить, чтобы создать очень сжатый цикл являются изменения в середине последовательности анимации .

@keyframes slant {
  50% { transform: skew(-2deg); }
}

Для точек и звезд, которые разделяют общую анимацию, мы заявляем, что один раз в @keyframes, но потом изменить сроки анимации для каждого из различных эффектов с минимальным кодом, как это возможно:

@keyframes blink {
  50% { opacity: 0; }
}

[class^="star"] {
  animation: blink 2s ease-in-out infinite both;
}

[class^="dot"] {
  animation: blink 5s -3s ease-in-out infinite both;
}

Мы не хотим, чтобы и звезды и точки, чтобы оживить в то же время, так что анимация в шахматном порядке с задержкой.Однако, при этом с положительным целым числом вызовет разрыв в непрерывности в начале анимации, когда зритель приходит.Эта проблема решается здесь, указав отрицательную задержку .

Конечно, мы также должны добавить наиболее распространенный видового мета тег:

  <meta name="viewport" content="width=device-width">

Чтобы получить наилучшую производительность и разгрузить работу в ГПУ (в частности, в Firefox), мы также должны аппаратно-ускорения любой элемент, который мы оживляющий.SCSS велика для этого, как я могу использовать подмешать:

@mixin accelerate {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000;
}

И добавить к все элементы с анимацией:

@include accelerate;

Обратная Compatibility

Если SVG или анимация не доступна, мы можем обеспечить обратную совместимость, добавив запасной вариант.В этом случае я использовал простой PNG, но вы также можете сделать что-то более сложным, если вы хотите.

<div class="fallback">
  <img src="fallback.png">
</div>

Мы добавляем в Modernizr — тонкий, пользовательские сборки для проверки SVG — и использовать крючки класса предоставляемых скрывать и отображать его в зависимости от уровня поддержки:

.svg .fallback {
  display: none;
}

.no-svg .fallback { 
  width: 50%;
  float: left;
  margin: 0 7% 0 0;
  img { width: 100%; }
}

И что у вас есть: комплексный анимации с краткой код, который сдвигает на основе видового экрана .

Методы # 2 и # 3: Анимация по ключевым кадрам с Steps() и SVG Sprites

Методы 2 и 3 короче и связаны друг с другом.В этих примерах мы будем использовать SVG спрайт сделать шаг анимации.Из всех веб-методов анимации, анимации шаг наиболее близко напоминает старый ручной тяге CELанимация.Кел это сокращение от “целлулоид”, который является тип прозрачного листа.Этот материал был использован аниматоров Диснея, как и оригинальные Looney Tunes обратить на вершине своих предыдущих чертежах, тем самым определяя последовательность и создавая иллюзию движения.

Изображения были расстреляны на пленке, кадр за кадром.Каждый кадр состоит из нескольких различных слоев.Был, как правило, стационарные окрашены фон, используется статически всей сцене.Тело персонажа и соответствующие подвижные части тела были затем окрашены на отдельных слоях целлулоида, чтобы уменьшить повторение.