Удивительные текстовые эффекты на CSS

window.onload = init;

function init() {
  var root = new THREERoot({
  createCameraControls:false,
  fov:10
  });
  root.renderer.setClearColor(0xffffff);
  root.renderer.setPixelRatio(window.devicePixelRatio || 1);
  root.camera.position.set(0, 0, 1400);

  var textAnimation = createTextAnimation();
  root.scene.add(textAnimation);

  var tween = TweenMax.fromTo(textAnimation, 4,
  {animationProgress:0},
  {animationProgress:1, ease:Power1.easeInOut, repeat:-1, yoyo:true}
  );
  createTweenScrubber(tween);
}

function createTweenScrubber(tween, seekSpeed) {
  seekSpeed = seekSpeed || 0.001;

  function stop() {
  TweenMax.to(tween, 2, {timeScale:0});
  }

  function resume() {
  TweenMax.to(tween, 2, {timeScale:1});
  }

  function seek(dx) {
  var progress = tween.progress();
  var p = THREE.Math.clamp((progress + (dx * seekSpeed)), 0, 1);

  tween.progress(p);
  }

  var _cx = 0;

  // desktop
  var mouseDown = false;
  document.body.style.cursor = 'pointer';

  window.addEventListener('mousedown', function(e) {
  mouseDown = true;
  document.body.style.cursor = 'ew-resize';
  _cx = e.clientX;
  stop();
  });
  window.addEventListener('mouseup', function(e) {
  mouseDown = false;
  document.body.style.cursor = 'pointer';
  resume();
  });
  window.addEventListener('mousemove', function(e) {
  if (mouseDown === true) {
  var cx = e.clientX;
  var dx = cx - _cx;
  _cx = cx;

  seek(dx);
  }
  });
  // mobile
  window.addEventListener('touchstart', function(e) {
  _cx = e.touches[0].clientX;
  stop();
  e.preventDefault();
  });
  window.addEventListener('touchend', function(e) {
  resume();
  e.preventDefault();
  });
  window.addEventListener('touchmove', function(e) {
  var cx = e.touches[0].clientX;
  var dx = cx - _cx;
  _cx = cx;

  seek(dx);
  e.preventDefault();
  });
}

function createTextAnimation() {
  var geometry = generateTextGeometry('ZorNet.Ru — сайт для вебмастера', {
  size:14,
  height:0,
  font:'droid sans',
  weight:'bold',
  style:'normal',
  bevelSize:0.75,
  bevelThickness:0.50,
  bevelEnabled:true,
  anchor:{x:0.5, y:0.5, z:0.5}
  });

  THREE.BAS.Utils.separateFaces(geometry);

  return new TextAnimation(geometry);
}

function generateTextGeometry(text, params) {
  var geometry = new THREE.TextGeometry(text, params);

  geometry.computeBoundingBox();

  geometry.userData = {};
  geometry.userData.size = {
  width: geometry.boundingBox.max.x - geometry.boundingBox.min.x,
  height: geometry.boundingBox.max.y - geometry.boundingBox.min.y,
  depth: geometry.boundingBox.max.z - geometry.boundingBox.min.z
  };

  var anchorX = geometry.userData.size.width * -params.anchor.x;
  var anchorY = geometry.userData.size.height * -params.anchor.y;
  var anchorZ = geometry.userData.size.depth * -params.anchor.z;
  var matrix = new THREE.Matrix4().makeTranslation(anchorX, anchorY, anchorZ);

  geometry.applyMatrix(matrix);

  return geometry;
}

////////////////////
// CLASSES
////////////////////

function TextAnimation(textGeometry) {
  var bufferGeometry = new THREE.BAS.ModelBufferGeometry(textGeometry);

  var aAnimation = bufferGeometry.createAttribute('aAnimation', 2);
  var aControl0 = bufferGeometry.createAttribute('aControl0', 3);
  var aControl1 = bufferGeometry.createAttribute('aControl1', 3);
  var aEndPosition = bufferGeometry.createAttribute('aEndPosition', 3);

  var faceCount = bufferGeometry.faceCount;
  var i, i2, i3, i4, v;

  var size = textGeometry.userData.size;
  var length = new THREE.Vector3(size.width, size.height, size.depth).multiplyScalar(0.5).length();
  var maxDelay = length * 0.06;

  this.animationDuration = maxDelay + 4 + 1;
  this._animationProgress = 0;

  for (i = 0, i2 = 0, i3 = 0, i4 = 0; i < faceCount; i++, i2 += 6, i3 += 9, i4 += 12) {
  var face = textGeometry.faces[i];
  var centroid = THREE.BAS.Utils.computeCentroid(textGeometry, face);
  var dirX = centroid.x > 0 ? 1 : -1;
  var dirY = centroid.y > 0 ? 1 : -1;

  // animation
  var delay = centroid.length() * THREE.Math.randFloat(0.03, 0.06);
  var duration = THREE.Math.randFloat(2, 4);

  for (v = 0; v < 6; v += 2) {
  aAnimation.array[i2 + v ] = delay + Math.random();
  aAnimation.array[i2 + v + 1] = duration;
  }

  // ctrl
  var c0x = THREE.Math.randFloat(0, 30) * dirX;
  var c0y = THREE.Math.randFloat(60, 120) * dirY;
  var c0z = THREE.Math.randFloat(-20, 20);

  var c1x = THREE.Math.randFloat(30, 60) * dirX;
  var c1y = THREE.Math.randFloat(0, 60) * dirY;
  var c1z = THREE.Math.randFloat(-20, 20);

  for (v = 0; v < 9; v += 3) {
  aControl0.array[i3 + v ] = c0x;
  aControl0.array[i3 + v + 1] = c0y;
  aControl0.array[i3 + v + 2] = c0z;

  aControl1.array[i3 + v ] = c1x;
  aControl1.array[i3 + v + 1] = c1y;
  aControl1.array[i3 + v + 2] = c1z;
  }
  }

  var material = new THREE.BAS.BasicAnimationMaterial({
  shading: THREE.FlatShading,
  side: THREE.DoubleSide,
  uniforms: {
  uTime: {type: 'f', value: 0}
  },
  shaderFunctions: [
  THREE.BAS.ShaderChunk['cubic_bezier']
  ],
  shaderParameters: [
  'uniform float uTime;',
  'attribute vec2 aAnimation;',
  'attribute vec3 aControl0;',
  'attribute vec3 aControl1;',
  'attribute vec3 aEndPosition;'
  ],
  shaderVertexInit: [
  'float tDelay = aAnimation.x;',
  'float tDuration = aAnimation.y;',
  'float tTime = clamp(uTime - tDelay, 0.0, tDuration);',
  'float tProgress = tTime / tDuration;'
  ],
  shaderTransformPosition: [
  'vec3 tPosition = transformed;',
  'tPosition *= 1.0 - tProgress;',
  'tPosition += cubicBezier(transformed, aControl0, aControl1, aEndPosition, tProgress);',
  'transformed = tPosition;'
  ]
  },
  {
  diffuse: 0x000000
  }
  );

  THREE.Mesh.call(this, bufferGeometry, material);

  this.frustumCulled = false;
}
TextAnimation.prototype = Object.create(THREE.Mesh.prototype);
TextAnimation.prototype.constructor = TextAnimation;

Object.defineProperty(TextAnimation.prototype, 'animationProgress', {
  get: function() {
  return this._animationProgress;
  },
  set: function(v) {
  this._animationProgress = v;
  this.material.uniforms['uTime'].value = this.animationDuration * v;
  }
});

function THREERoot(params) {
  params = utils.extend({
  antialias:false,

  fov:60,
  zNear:1,
  zFar:10000,

  createCameraControls:true
  }, params);

  this.renderer = new THREE.WebGLRenderer({
  antialias:params.antialias
  });
  document.getElementById('three-container').appendChild(this.renderer.domElement);

  this.camera = new THREE.PerspectiveCamera(
  params.fov,
  window.innerWidth / window.innerHeight,
  params.zNear,
  params.zfar
  );

  this.scene = new THREE.Scene();

  if (params.createCameraControls) {
  this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
  }

  this.resize = this.resize.bind(this);
  this.tick = this.tick.bind(this);

  this.resize();
  this.tick();

  window.addEventListener('resize', this.resize, false);
}
THREERoot.prototype = {
  tick: function() {
  this.update();
  this.render();
  requestAnimationFrame(this.tick);
  },
  update: function() {
  this.controls && this.controls.update();
  },
  render: function() {
  this.renderer.render(this.scene, this.camera);
  },
  resize: function() {
  this.camera.aspect = window.innerWidth / window.innerHeight;
  this.camera.updateProjectionMatrix();

  this.renderer.setSize(window.innerWidth, window.innerHeight);
  }
};

var utils = {
  extend:function(dst, src) {
  for (var key in src) {
  dst[key] = src[key];
  }

  return dst;
  }
};

<figure class="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.7 162.3" id="heavy" preserveAspectRatio="xMinYMin meet">
<g>
<path d="M72,134.1v0.9h30.5v-8.8C92,127.2,81.9,130.4,72,134.1z"/>
<path d="M102.6,113c-10.1,1.5-20.3,2.2-30.5,2.7v18.4c9.9-3.7,20-6.9,30.5-7.8V113z"/>
<path d="M57.5,116.3c-10.2,0.4-20.4,1-30.5,2.1V135h30.5V116.3z"/>
<path d="M57.5,36.9C47.2,33.6,37,30,26.9,26.2v36.5c10.2-1.3,20.4-2.1,30.5-2.7V36.9z"/>
<path d="M102.6,78.7V50.7c-10.2-2.9-20.4-5.9-30.5-9v19.6c7.2,6.5,15.1,11.9,23.5,16.6C97.9,78.1,100.2,78.4,102.6,78.7z"/>
<path d="M72,61.2v1.2H57.5V60c-10.2,0.5-20.4,1.4-30.5,2.7v7c23.1,2.6,45.9,5.2,68.6,8.2C87.1,73.1,79.2,67.7,72,61.2z"/>
<path d="M102.6,95.6c-10.2,1.1-20.4,2.1-30.5,3.1v16.9c10.2-0.5,20.5-1.2,30.5-2.7V95.6z"/>
<path d="M102.6,78.7c-2.3-0.3-4.7-0.6-7-0.9c2.3,1.3,4.7,2.5,7,3.7V78.7z"/>
<path d="M95.5,77.8c-22.7-3-45.5-5.6-68.6-8.2v14.1c9.6,4.1,20.3,5.8,30.5,7.9v-2.2H72V91c10.5-3.3,21-4.3,30.5-9.1v-0.4
C100.2,80.3,97.8,79.1,95.5,77.8z"/>
<path d="M72,98.8c10.2-1,20.3-2,30.5-3.1V81.9C93,86.7,82.6,87.7,72,91V98.8z"/>
<path d="M26.9,103.3c10.2-1.1,20.4-2.1,30.5-3.1v-8.5c-10.2-2.1-20.9-3.9-30.5-7.9V103.3z"/>
<path d="M57.5,100.2c-10.2,1-20.4,2-30.5,3.1v15.1c10.1-1.2,20.3-1.7,30.5-2.1V100.2z"/>
<path d="M57.5,21.9H26.9v4.3C37,30,47.2,33.6,57.5,36.9V21.9z"/>
<path d="M102.6,21.9H72v19.7c10.1,3.2,20.3,6.2,30.5,9V21.9z"/>
<path d="M175.2,21.9h-13.1c4.3,4,8.6,7.9,13.1,11.7V21.9z"/>
<path d="M162.1,21.9h-43.7v3.3c17.1,8,34.2,16.3,51.8,23.8h5V33.6C170.7,29.8,166.3,25.9,162.1,21.9z"/>
<path d="M118.4,55c10.2,2.8,20.3,5.5,30.5,8.1V49h21.2c-17.5-7.6-34.7-15.8-51.8-23.8V55z"/>
<path d="M172.4,86.1V69.3c-7.5-1.9-15-3.9-22.5-5.8h-1v-0.3c-10.2-2.7-20.4-5.4-30.5-8.1v25.9c14.4,2.1,28.8,4.3,43.3,6.8
c1.4-0.2,2.9-0.5,4.3-0.7C168.1,86.7,170.3,86.4,172.4,86.1z"/>
<path d="M172.4,86.1c-2.1,0.3-4.3,0.5-6.4,0.9c-1.4,0.2-2.9,0.5-4.3,0.7c3.6,0.6,7.2,1.2,10.7,1.9V86.1z"/>
<path d="M118.4,80.9v12.9c14.4-1.7,28.8-3.7,43.3-6.1C147.2,85.2,132.8,83,118.4,80.9z"/>
<path d="M148.9,90.5h23.5v-0.9c-3.6-0.7-7.2-1.3-10.7-1.9c-14.5,2.4-28.9,4.4-43.3,6.1v16.1c5.3-1.3,10.5-2.9,15.6-4.9
c4.9-1.9,9.9-3.6,14.9-5.1V90.5z"/>
<path d="M148.9,107.9v-8c-5,1.5-10,3.2-14.9,5.1c-5.1,2-10.4,3.6-15.6,4.9V129c1.2-0.7,2.4-1.3,3.6-2c13.5-6.7,27.1-13.5,41.2-19.1
H148.9z"/>
<path d="M175.2,135v-27.1h-4.6c-7.1,8.4-13,17.6-18.4,27.1H175.2z"/>
<path d="M122,127c-1.2,0.7-2.4,1.3-3.6,2v6h33.7c5.5-9.5,11.4-18.7,18.4-27.1h-7.3C149.1,113.5,135.5,120.3,122,127z"/>
<path d="M172.4,63.4H150c7.5,2,15,3.9,22.5,5.8V63.4z"/>
<path d="M221.8,82.4C221.8,82.4,221.8,82.4,221.8,82.4C221.8,82.4,221.8,82.4,221.8,82.4L221.8,82.4z"/>
<path d="M222.3,79.5c-7.1-15.6-10.9-32.4-16.2-48.5l-10.7,44.4c8.8,2.3,17.5,4.7,26.3,7.1c0,0,0,0,0,0L222.3,79.5z"/>
<path d="M208.3,21.9l-2.2,9c5.3,16.2,9.1,32.9,16.2,48.5l0.1-0.4l2.1-13.7c0-0.2,0.1-1,0.3-2.1s0.4-3.3,0.7-6.3
c0.2-1.5,0.4-2.9,0.5-4.2c0.2-1.3,0.3-2.4,0.4-3.4l0.4,4.4c0.8-10.6,1.5-21.3,1.9-31.9H208.3z"/>
<path d="M245.7,21.9h-16.9c-0.4,10.6-1.1,21.3-1.9,31.9l0.6,6.3c0.2,2.2,0.4,4,0.6,5.5c0.1,1.4,0.3,2.6,0.4,3.4
c0.3,2.2,0.5,4.1,0.7,5.8c5.2-15,11.8-29.3,18.6-43.4L245.7,21.9z"/>
<path d="M230.2,83.7l0.4,2.7c0.9-0.3,1.8-0.6,2.7-0.9c7.5-5.1,15-10.3,22.4-15.6l-8.1-38.4c-6.8,14.1-13.3,28.4-18.6,43.4
c0.5,3.9,0.8,6.2,0.8,7C230.1,82.9,230.2,83.6,230.2,83.7z"/>
<path d="M255.8,69.8c-7.4,5.3-14.9,10.5-22.4,15.6c8-2.8,16-5.5,24-8.2L255.8,69.8z"/>
<path d="M231.8,96.8c11.2,5.6,22.3,11.3,33.4,17.1l-3.7-17.5c-10-1.9-19.8-3.7-30.2-5.6l0.9,6.1H231.8z"/>
<path d="M261.5,96.4l-1.7-8.2c-9.6-0.1-19.2-0.1-28.8-0.2l0.4,2.8C241.7,92.6,251.4,94.5,261.5,96.4z"/>
<path d="M259.7,88.2l-2.3-11c-8,2.7-16,5.4-24,8.2c-0.9,0.6-1.7,1.2-2.6,1.8l0.1,0.9C240.5,88,250.1,88.1,259.7,88.2z"/>
<path d="M233.4,85.4c-0.9,0.3-1.8,0.6-2.7,0.9l0.1,0.8C231.6,86.6,232.5,86,233.4,85.4z"/>
<path d="M195.5,75.3l-2.2,9c9.5-0.6,19-1.1,28.4-1.9C213,80,204.3,77.6,195.5,75.3z"/>
<path d="M220.5,89.9l1.3-7.5c0,0,0,0,0,0c-9.5,0.8-19,1.3-28.4,1.9l-1.7,6.9C201.2,90.2,210.8,89.8,220.5,89.9z"/>
<path d="M218,91c-0.7,1.2-1.3,2.3-2,3.5c1.3-0.1,2.5-0.2,3.8-0.3l0.7-4.3c-9.7-0.2-19.3,0.2-28.8,1.3l-1.9,7.8
c8.5-2.2,17.2-3.8,26.2-4.6C216.7,93.3,217.3,92.2,218,91z"/>
<path d="M265.2,113.9c-11.1-5.7-22.2-11.5-33.4-17.1h-0.2c3.4,8.7,6.6,17.5,10.2,26c9.3,2.5,18.3,5.9,27.3,9.3L265.2,113.9z"/>
<path d="M241.7,122.8c1.8,4.1,3.6,8.2,5.6,12.2h22.3l-0.6-2.9C260.1,128.7,251.1,125.3,241.7,122.8z"/>
<path d="M231.5,96.8h-10.5c-4.8,12.1-7.5,25.1-9.4,38.2h1l2.5-14.4h20.6l0.1,0.8c2,0.4,3.9,0.9,5.8,1.4
C238.1,114.3,234.9,105.6,231.5,96.8z"/>
<path d="M235.9,121.4l2.1,13.6h9.3c-2-4-3.8-8.1-5.6-12.2C239.8,122.3,237.9,121.8,235.9,121.4z"/>
<path d="M219.3,96.8l0.5-2.7c-1.3,0.1-2.5,0.2-3.8,0.3c-8.2,13.9-17.5,27.2-26.8,40.5h22.5c1.9-13.1,4.6-26.1,9.4-38.2H219.3z"/>
<path d="M189.8,99l-8.6,36h8c9.3-13.3,18.6-26.7,26.8-40.5C207,95.2,198.3,96.8,189.8,99z"/>
<path d="M358.5,21.9h-33.2l-4.2,21.7c12.2-5.6,24.1-11.9,36.3-17.7L358.5,21.9z"/>
<path d="M321.1,43.6l-2.9,15.2c10.8-2.9,21.6-5.7,32.5-8.2l6.7-24.7C345.2,31.7,333.3,38,321.1,43.6z"/>
<path d="M270.6,21.9l3.9,17.1c8.4-5.6,16.9-11.3,25.4-17.1H270.6z"/>
<path d="M299.9,21.9c-8.5,5.7-17,11.5-25.4,17.1l3.4,14.7c7-5.2,14-10.4,21.1-15.7c1.9-1.5,3.8-2.9,5.7-4.2l-2-11.9H299.9z"/>
<path d="M304.7,33.8c-1.9,1.3-3.8,2.8-5.7,4.2c-7.1,5.3-14.1,10.6-21.1,15.7l3.6,15.7c9.3-2.9,18.5-5.6,27.9-8.3
c-0.4-2.4-0.7-4.7-1.1-7L304.7,33.8z"/>
<path d="M335.3,106.8c-15.4-1.8-30.9-3.8-46.6-6l3.1,13.7c12.7,4.4,25,9.8,37.1,15.8L335.3,106.8z"/>
<path d="M291.8,114.6l3.4,14.9c3.6,1.9,7.3,3.7,10.9,5.5h21.5l1.3-4.6C316.8,124.4,304.5,118.9,291.8,114.6z"/>
<path d="M311.8,80c-0.7-6.6-1.5-12.8-2.4-18.8c-9.3,2.6-18.6,5.4-27.9,8.3l2.7,11.8C293.5,81.3,302.6,80.8,311.8,80z"/>
<path d="M284.2,81.2l1.7,7.2c9,0.1,17.9,0.3,26.8,0.4c-0.3-3-0.6-6-0.9-8.9C302.6,80.8,293.5,81.3,284.2,81.2z"/>
<path d="M350.7,50.6c-10.9,2.5-21.7,5.2-32.5,8.2l-0.1,0.6c-1.1,5.6-2,11.4-2.8,17.3c-0.1,1-0.3,2-0.4,3c9.8-1,19.4-2.6,29.1-4.4
L350.7,50.6z"/>
<path d="M314.9,79.7c-0.4,3-0.7,6.1-1,9.2c8.7,0.1,17.5,0.3,26.2,0.4l3.8-14.1C334.3,77.1,324.6,78.6,314.9,79.7z"/>
<path d="M313.3,95.7c-0.2-2.3-0.4-4.6-0.6-6.8c-8.9-0.1-17.9-0.3-26.8-0.4l2.8,12.4c15.7,2.2,31.2,4.1,46.6,6l4.8-17.5
c-8.7-0.1-17.5-0.3-26.2-0.4C313.7,91.1,313.5,93.4,313.3,95.7z"/>
<path d="M296.5,135h9.6c-3.6-1.8-7.3-3.7-10.9-5.5L296.5,135z"/>
<path d="M401.6,21.9h-31.9l8.2,19.1c4-1.4,7.8-3.3,11.1-6c4.7-3.2,9.2-6.5,13.8-9.5L401.6,21.9z"/>
<path d="M407.1,38.7l-4.3-13.2c-4.6,3-9.1,6.3-13.8,9.5c-3.3,2.7-7.1,4.5-11.1,6l1.5,3.6c9.3-1.7,18.6-3.3,28-4.6
C407.3,39.5,407.2,39.1,407.1,38.7z"/>
<path d="M428.3,118.5c-10.3-1.5-20.4-2.9-30.5-4.2V126c4.3,3,8.7,5.9,13.1,9h17.5V118.5z"/>
<path d="M397.8,135h13.1c-4.4-3-8.7-6-13.1-9V135z"/>
<path d="M397.8,114.3c10.1,1.3,20.3,2.7,30.5,4.2V90.2c-10.2,0-20.4,0-30.5-0.1V114.3z"/>
<path d="M423,21.9l-1.3,3.8c8,5.7,16.4,10.9,24.8,16.2l8.1-20H423z"/>
<path d="M421.7,25.7l-4.2,12.8c1.5-0.2,3-0.4,4.5-0.6c-1.5,0.2-3,0.4-4.5,0.6l-0.1,0.3c-0.6,1.9-1.4,4.3-2.2,7.3
c-0.8,2.9-1.8,6.5-2.9,10.5c10.9-3.6,21.9-7.3,32.8-11.1l1.4-3.5C438.1,36.7,429.7,31.5,421.7,25.7z"/>
<path d="M407.5,39.9c-9.4,1.3-18.7,2.9-28,4.6l8.5,19.7c8.1-2.4,16.2-4.9,24.3-7.6c-0.7-2.7-1.4-5.6-2.3-8.5
C409.2,45.5,408.4,42.7,407.5,39.9z"/>
<path d="M397.8,87.1v3c10.2,0.1,20.4,0.1,30.5,0.1v-3.1l6.2-15.4c-13.5,2.4-27.5,3-40.5,6.7L397.8,87.1z"/>
<path d="M412.3,56.9c0-0.1,0-0.1,0-0.2c-8.1,2.6-16.2,5.2-24.3,7.6l6.1,14.2c13-3.7,27-4.3,40.5-6.7l10.6-26.2
c-10.9,3.8-21.8,7.5-32.8,11.1C412.3,56.7,412.3,56.8,412.3,56.9z"/>
</g>
</svg>
</figure>

html { font-size: 1px; }
body {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  font-size: 30rem;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.6)), url(https://images.unsplash.com/photo-1493382051629-7eb03ec93ea2);
  background-position: 50% 75%;
  background-size: cover;
}

main {
  position: relative;
  display: flex;
}

h1 { margin: 0; }
.marker, .r, .e1, .s1, .s2, .e2 {
  animation-timing-function: cubic-bezier(0.15,-0.01, 0.58, 1);
  animation-duration: 5s;
  animation-iteration-count: infinite;
  will-change: transform;
}

.marker {
  position: absolute; top: 4rem; left: -3rem;
  height: 3rem; width: 40rem;
  background-color: black;
  animation-name: marker;
}

.r { margin-left: 1rem; animation-name: r; }
.e1 { margin-left: 7rem; animation-name: e1; }
.s1 { margin-left: 16rem; animation-name: s1; }
.s2 { margin-left: 21rem; animation-name: s2; }
.e2 { margin: 0 36rem 0 42rem; animation-name: e2; }

@keyframes r {  
  0%, 20% { transform: translateX(0); }
  50%, 70% { transform: translateX(35rem); }
}
@keyframes e1 {  
  0%, 20% { transform: translateX(0); }
  50%, 70% { transform: translateX(75rem); }
}
@keyframes s1 {  
  0%, 20% { transform: translateX(0); }
  50%, 70% { transform: translateX(81rem); }
}
@keyframes s2 {  
  0%, 20% { transform: translateX(0); }
  50%, 70% { transform: translateX(71rem); }
}
@keyframes e2 {  
  0%, 20% { transform: translateX(0); }
  50%, 70% { transform: translateX(34rem); }
}
@keyframes marker {  
  0%, 20% { transform: translateX(0); }
  50%, 70% { transform: translateX(337rem); }
}