时间戳

首页 > 解决方案 > 为什么我在 Squarespace 中的动画可以在 Chrome 中运行，但在 Safari 中无法运行？

html - 为什么我在 Squarespace 中的动画可以在 Chrome 中运行，但在 Safari 中无法运行？

问题描述

我使用代码块和 HTML 代码向我的 Squarespace 网站添加了打字机动画。它适用于谷歌浏览器，但不适用于 Safari。我读到“转换”需要额外的代码才能在 Squarespace 中工作，但我没有使用该功能。我尝试在论坛上阅读有关如何解决此问题的信息，但从未找到。我能做些什么不同的事情？如果有人有以前如何解决此问题的链接，那将很有帮助。

另外，如果您对如何改进代码有任何建议，我将不胜感激，因为我是一名初级网页设计师。

.typewriter {
  align-items: center;

  font-size: 350%;
  font-family: "DIN Bold", sans-serif;
  text-align: center;
}

.typewriter:after {
  content: " " ;

  color: #ea746a;

  animation: write 15s infinite linear;

  animation-fill-mode: forwards;
}

@keyframes write {
  1% {
    content: "A";
  }
  2% {
    content: "AE";
  }
  3% {
    content: "AES";
  }
  4% {
    content: "AEST";
  }
  5% {
    content: "AESTH";
  }
  6% {
    content: "AESTHE";
  }
  7% {
    content: "AESTHET";
  }
  8% {
    content: "AESTHETI";
  }
  9% {
    content: "AESTHETIC";
  }
  10% {
    content: "AESTHETICS";
  }
  11% {
    content: "AESTHETICS.";
  }
  14% {
    content: "AESTHETICS";
  }
  14.5% {
    content: "AESTHETIC";
  }
  15% {
    content: "AESTHETI";
  }
  15.5% {
    content: "AESTHET";
  }
  16% {
    content: "AESTHE";
  }
  16.5% {
    content: "AESTH";
  }
  17% {
    content: "AEST";
  }
  17.5% {
    content: "AES";
  }
  18% {
    content: "AE";
  }
  18.5% {
    content: "A";
  }
  19% {
    content: "";
  }
  20% {
    content: "D";
  }
  21% {
    content: "DI";
  }
  22% {
    content: "DIG";
  }
  23% {
    content: "DIGI";
  }
  24% {
    content: "DIGIT";
  }
  25% {
    content: "DIGITA";
  }
  26% {
    content: "DIGITAL";
  }
  27% {
    content: "DIGITAL M";
  }
  28% {
    content: "DIGITAL M";
  }
  29% {
    content: "DIGITAL MA";
  }
  30% {
    content: "DIGITAL MAR";
  }
  31% {
    content: "DIGITAL MARK";
  }
  32% {
    content: "DIGITAL MARKE";
  }
  33% {
    content: "DIGITAL MARKET";
  }
  34% {
    content: "DIGITAL MARKETI";
  }
  35% {
    content: "DIGITAL MARKETIN";
  }
  36% {
    content: "DIGITAL MARKETING";
  }
  37% {
    content: "DIGITAL MARKETING.";
  }
  39% {
    content: "DIGITAL MARKETING";
  }
  39.5% {
    content: "DIGITAL MARKETIN";
  }
  40% {
    content: "DIGITAL MARKETI";
  }
  40.5% {
    content: "DIGITAL MARKET";
  }
  41% {
    content: "DIGITAL MARKE";
  }
  41.5% {
    content: "DIGITAL MARK";
  }
  42% {
    content: "DIGITAL MAR";
  }
  42.5% {
    content: "DIGITAL MA";
  }
  43% {
    content: "DIGITAL M";
  }
  43.5% {
    content: "DIGITAL";
  }
  44% {
    content: "DIGITA";
  }
  44.5% {
    content: "DIGIT";
  }
  45% {
    content: "DIGI";
  }
  45.5% {
    content: "DIG";
  }
  46% {
    content: "DI";
  }
  46.5% {
    content: "D";
  }
  47% {
    content: "";
  }
  48% {
    content: "C";
  }
  49% {
    content: "CO";
  }
  50% {
    content: "CON";
  }
  51% {
    content: "CONT";
  }
  52% {
    content: "CONTE";
  }
  53% {
    content: "CONTEN";
  }
  54% {
    content: "CONTENT";
  }
  55% {
    content: "CONTENT ";
  }
  56% {
    content: "CONTENT C";
  }
  57% {
    content: "CONTENT CR";
  }
  58% {
    content: "CONTENT CRE";
  }
  59% {
    content: "CONTENT CREA";
  }
  60% {
    content: "CONTENT CREAT";
  }
  61% {
    content: "CONTENT CREATI";
  }
  62% {
    content: "CONTENT CREATIO";
  }
  63% {
    content: "CONTENT CREATION";
  }
  64% {
    content: "CONTENT CREATION.";
  }
  66% {
    content: "CONTENT CREATION";
  }
  66.5% {
    content: "CONTENT CREATIO";
  }
  67% {
    content: "CONTENT CREATI";
  }
  67.5% {
    content: "CONTENT CREAT";
  }
  68% {
    content: "CONTENT CREA";
  }
  68.5% {
    content: "CONTENT CRE";
  }
  69% {
    content: "CONTENT CR";
  }
  69.5% {
    content: "CONTENT ";
  }
  70% {
    content: "CONTENT";
  }
  70.5% {
    content: "CONTEN";
  }
  71% {
    content: "CONTE";
  }
  71.5% {
    content: "CONT";
  }
  72% {
    content: "CON";
  }
  72.5% {
    content: "CO";
  }
  73% {
    content: "C";
  }
  73.5% {
    content: "";
  }
  75% {
    content: "W";
  }
  76% {
    content: "WE";
  }
  77% {
    content: "WEB";
  }
  78% {
    content: "WEB ";
  }
  79% {
    content: "WEB D";
  }
  80% {
    content: "WEB DE";
  }
  81% {
    content: "WEB DES";
  }
  82% {
    content: "WEB DESI";
  }
  83% {
    content: "WEB DESIG";
  }
  84% {
    content: "WEB DESIGN";
  }
  85% {
    content: "WEB DESIGN.";
  }
  86% {
    content: "WEB DESIGN";
  }
  86.5% {
    content: "WEB DESIG";
  }
  87% {
    content: "WEB DESI";
  }
  87.5% {
    content: "WEB DES";
  }
  88% {
    content: "WEB DE";
  }
  88.5% {
    content: "WEB D";
  }
  89% {
    content: "WEB ";
  }
  89.5% {
    content: "WEB";
  }
  90% {
    content: "WE";
  }
  90.5% {
    content: "W";
  }
  91% {
    content: " ";
  }
}
<div class="typewriter">
  TRANSFORM YOUR BRAND THROUGH
  <span>
    <br />
  </span>
</div>

标签： htmlcssanimationcss-animationssquarespace

解决方案

问题是 Safari 目前不允许伪元素中的内容动画，因此类似打字机的横幅没有移动。

无需使用 Javascript 即可获得打字机的效果（一次出现一个字符）。使用非打字机字体（即如果字体不是固定宽度）是可怕的，即使使用打字机固定宽度字体也需要一些计算。

这是一种使用打字机字体的方法。我更改的唯一 HTML 是将您的 span 变成一个 div，并且我给它一个类，以确保它不会干扰您可能拥有的任何其他内容。

我们使用这个 div 上的 before 和 after 伪元素来编写横幅并隐藏那些我们不想看到的字符。所以有两个动画，写在after伪元素上，写在before伪元素上。它是这样安排的：

在此处输入图像描述

绿色是前面的伪元素，位于横幅字符的前面，前后移动以显示/隐藏字符。红色是after伪元素，它扩展和收缩并左右移动并隐藏了overflow-x。蓝色是 div 本身。

关键帧很大——我使用代码来创建它们，相当简单，但在现实世界中使用我想在运行时会有代码（在 JS 或 PHP 或其他脚本语言中），因此很容易更改内容旗帜无需经历重新计算的痛苦。如果需要，很高兴分享该代码。 

div.typewriter {
  position: relative;
  font-size:350%;
  font-family:'DIN Bold',serif;
  align-items:center;
  text-align: center;
  padding-bottom:2em;
  width: 100%;
}

div.typewriterinner {
  text-align: left;
  padding: 0;
  margin: 0;
  overflow: hidden;
  color: #ea746a;
  }
  
div.typewriterinner:before, div.typewriterinner:after {
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;
  left: 0;
  display: inline-block;
  font-family: Courier, monospace;
  animation: write 15s infinite linear;
  background-color: white;
  }
  
div.typewriterinner:before {
  content: ' ';
  animation-name: writebefore;
  width: 50%;
  height: 1em;
  z-index: 2;
  }
  
div.typewriterinner:after {
  content: 'AESTHETICS.CONTENT CREATION.DIGITAL MARKETING.WEB DESIGN.';
  z-index: 1;
  overflow-x: hidden;
  white-space: nowrap;
} 
@media screen and (max-width: 767px) {
  div.typewriterinner:before, div.typewriterinner:after {
    font-size: 6vw; /* just to get one one line - this needs more thought - what do we want to happen? */
  }
}
@keyframes writebefore {0% { margin-left: -0ch;}0.01% { margin-left: -0.5ch;}0.8771929824561403% { margin-left: -0.5ch;}0.8871929824561403% { margin-left: -1ch;}1.7543859649122806% { margin-left: -1ch;}1.7643859649122806% { margin-left: -1.5ch;}2.631578947368421% { margin-left: -1.5ch;}2.6415789473684206% { margin-left: -2ch;}3.508771929824561% { margin-left: -2ch;}3.518771929824561% { margin-left: -2.5ch;}4.385964912280701% { margin-left: -2.5ch;}4.395964912280701% { margin-left: -3ch;}5.263157894736842% { margin-left: -3ch;}5.273157894736841% { margin-left: -3.5ch;}6.140350877192982% { margin-left: -3.5ch;}6.150350877192982% { margin-left: -4ch;}7.017543859649122% { margin-left: -4ch;}7.027543859649122% { margin-left: -4.5ch;}7.894736842105263% { margin-left: -4.5ch;}7.904736842105263% { margin-left: -5ch;}8.771929824561402% { margin-left: -5ch;}8.781929824561402% { margin-left: -5ch;}9.649122807017543% { margin-left: -5ch;}9.659122807017543% { margin-left: -4.5ch;}10.526315789473683% { margin-left: -4.5ch;}10.536315789473683% { margin-left: -4ch;}11.403508771929824% { margin-left: -4ch;}11.413508771929823% { margin-left: -3.5ch;}12.280701754385964% { margin-left: -3.5ch;}12.290701754385964% { margin-left: -3ch;}13.157894736842104% { margin-left: -3ch;}13.167894736842104% { margin-left: -2.5ch;}14.035087719298245% { margin-left: -2.5ch;}14.045087719298245% { margin-left: -2ch;}14.912280701754385% { margin-left: -2ch;}14.922280701754385% { margin-left: -1.5ch;}15.789473684210526% { margin-left: -1.5ch;}15.799473684210525% { margin-left: -1ch;}16.666666666666664% { margin-left: -1ch;}16.676666666666666% { margin-left: -0.5ch;}17.543859649122805% { margin-left: -0.5ch;}17.553859649122806% { margin-left: -0ch;}18.421052631578945% { margin-left: -0ch;}18.431052631578947% { margin-left: --0.5ch;}19.298245614035086% { margin-left: -0ch;}19.308245614035087% { margin-left: -0.5ch;}20.175438596491226% { margin-left: -0.5ch;}20.185438596491228% { margin-left: -1ch;}21.052631578947366% { margin-left: -1ch;}21.062631578947368% { margin-left: -1.5ch;}21.929824561403507% { margin-left: -1.5ch;}21.93982456140351% { margin-left: -2ch;}22.807017543859647% { margin-left: -2ch;}22.81701754385965% { margin-left: -2.5ch;}23.684210526315788% { margin-left: -2.5ch;}23.69421052631579% { margin-left: -3ch;}24.561403508771928% { margin-left: -3ch;}24.57140350877193% { margin-left: -3.5ch;}25.43859649122807% { margin-left: -3.5ch;}25.44859649122807% { margin-left: -4ch;}26.31578947368421% { margin-left: -4ch;}26.32578947368421% { margin-left: -4.5ch;}27.19298245614035% { margin-left: -4.5ch;}27.20298245614035% { margin-left: -5ch;}28.07017543859649% { margin-left: -5ch;}28.08017543859649% { margin-left: -5.5ch;}28.94736842105263% { margin-left: -5.5ch;}28.95736842105263% { margin-left: -6ch;}29.82456140350877% { margin-left: -6ch;}29.834561403508772% { margin-left: -6.5ch;}30.70175438596491% { margin-left: -6.5ch;}30.711754385964912% { margin-left: -7ch;}31.57894736842105% { margin-left: -7ch;}31.588947368421053% { margin-left: -7.5ch;}32.45614035087719% { margin-left: -7.5ch;}32.46614035087719% { margin-left: -8ch;}33.33333333333333% { margin-left: -8ch;}33.34333333333333% { margin-left: -8ch;}34.21052631578947% { margin-left: -8ch;}34.22052631578947% { margin-left: -7.5ch;}35.08771929824561% { margin-left: -7.5ch;}35.09771929824561% { margin-left: -7ch;}35.96491228070175% { margin-left: -7ch;}35.97491228070175% { margin-left: -6.5ch;}36.84210526315789% { margin-left: -6.5ch;}36.85210526315789% { margin-left: -6ch;}37.719298245614034% { margin-left: -6ch;}37.72929824561403% { margin-left: -5.5ch;}38.59649122807017% { margin-left: -5.5ch;}38.60649122807017% { margin-left: -5ch;}39.473684210526315% { margin-left: -5ch;}39.48368421052631% { margin-left: -4.5ch;}40.35087719298245% { margin-left: -4.5ch;}40.36087719298245% { margin-left: -4ch;}41.228070175438596% { margin-left: -4ch;}41.238070175438594% { margin-left: -3.5ch;}42.10526315789473% { margin-left: -3.5ch;}42.11526315789473% { margin-left: -3ch;}42.98245614035088% { margin-left: -3ch;}42.992456140350875% { margin-left: -2.5ch;}43.859649122807014% { margin-left: -2.5ch;}43.86964912280701% { margin-left: -2ch;}44.73684210526316% { margin-left: -2ch;}44.746842105263156% { margin-left: -1.5ch;}45.614035087719294% { margin-left: -1.5ch;}45.62403508771929% { margin-left: -1ch;}46.49122807017544% { margin-left: -1ch;}46.501228070175436% { margin-left: -0.5ch;}47.368421052631575% { margin-left: -0.5ch;}47.37842105263157% { margin-left: -0ch;}48.24561403508772% { margin-left: -0ch;}48.25561403508772% { margin-left: --0.5ch;}49.122807017543856% { margin-left: -0ch;}49.132807017543854% { margin-left: -0.5ch;}50% { margin-left: -0.5ch;}50.01% { margin-left: -1ch;}50.87719298245614% { margin-left: -1ch;}50.887192982456135% { margin-left: -1.5ch;}51.75438596491228% { margin-left: -1.5ch;}51.76438596491228% { margin-left: -2ch;}52.63157894736842% { margin-left: -2ch;}52.641578947368416% { margin-left: -2.5ch;}53.50877192982456% { margin-left: -2.5ch;}53.51877192982456% { margin-left: -3ch;}54.3859649122807% { margin-left: -3ch;}54.3959649122807% { margin-left: -3.5ch;}55.26315789473684% { margin-left: -3.5ch;}55.27315789473684% { margin-left: -4ch;}56.14035087719298% { margin-left: -4ch;}56.15035087719298% { margin-left: -4.5ch;}57.017543859649116% { margin-left: -4.5ch;}57.027543859649114% { margin-left: -5ch;}57.89473684210526% { margin-left: -5ch;}57.90473684210526% { margin-left: -5.5ch;}58.7719298245614% { margin-left: -5.5ch;}58.781929824561395% { margin-left: -6ch;}59.64912280701754% { margin-left: -6ch;}59.65912280701754% { margin-left: -6.5ch;}60.52631578947368% { margin-left: -6.5ch;}60.536315789473676% { margin-left: -7ch;}61.40350877192982% { margin-left: -7ch;}61.41350877192982% { margin-left: -7.5ch;}62.28070175438596% { margin-left: -7.5ch;}62.29070175438596% { margin-left: -8ch;}63.1578947368421% { margin-left: -8ch;}63.1678947368421% { margin-left: -8.5ch;}64.03508771929825% { margin-left: -8.5ch;}64.04508771929825% { margin-left: -8.5ch;}64.91228070175438% { margin-left: -8.5ch;}64.92228070175439% { margin-left: -8ch;}65.78947368421052% { margin-left: -8ch;}65.79947368421053% { margin-left: -7.5ch;}66.66666666666666% { margin-left: -7.5ch;}66.67666666666666% { margin-left: -7ch;}67.54385964912281% { margin-left: -7ch;}67.55385964912281% { margin-left: -6.5ch;}68.42105263157895% { margin-left: -6.5ch;}68.43105263157895% { margin-left: -6ch;}69.29824561403508% { margin-left: -6ch;}69.30824561403509% { margin-left: -5.5ch;}70.17543859649122% { margin-left: -5.5ch;}70.18543859649122% { margin-left: -5ch;}71.05263157894737% { margin-left: -5ch;}71.06263157894738% { margin-left: -4.5ch;}71.9298245614035% { margin-left: -4.5ch;}71.93982456140351% { margin-left: -4ch;}72.80701754385964% { margin-left: -4ch;}72.81701754385965% { margin-left: -3.5ch;}73.68421052631578% { margin-left: -3.5ch;}73.69421052631579% { margin-left: -3ch;}74.56140350877193% { margin-left: -3ch;}74.57140350877194% { margin-left: -2.5ch;}75.43859649122807% { margin-left: -2.5ch;}75.44859649122807% { margin-left: -2ch;}76.3157894736842% { margin-left: -2ch;}76.32578947368421% { margin-left: -1.5ch;}77.19298245614034% { margin-left: -1.5ch;}77.20298245614035% { margin-left: -1ch;}78.0701754385965% { margin-left: -1ch;}78.0801754385965% { margin-left: -0.5ch;}78.94736842105263% { margin-left: -0.5ch;}78.95736842105264% { margin-left: -0ch;}79.82456140350877% { margin-left: -0ch;}79.83456140350877% { margin-left: --0.5ch;}80.7017543859649% { margin-left: -0ch;}80.71175438596491% { margin-left: -0.5ch;}81.57894736842105% { margin-left: -0.5ch;}81.58894736842106% { margin-left: -1ch;}82.45614035087719% { margin-left: -1ch;}82.4661403508772% { margin-left: -1.5ch;}83.33333333333333% { margin-left: -1.5ch;}83.34333333333333% { margin-left: -2ch;}84.21052631578947% { margin-left: -2ch;}84.22052631578947% { margin-left: -2.5ch;}85.0877192982456% { margin-left: -2.5ch;}85.09771929824561% { margin-left: -3ch;}85.96491228070175% { margin-left: -3ch;}85.97491228070176% { margin-left: -3.5ch;}86.84210526315789% { margin-left: -3.5ch;}86.8521052631579% { margin-left: -4ch;}87.71929824561403% { margin-left: -4ch;}87.72929824561403% { margin-left: -4.5ch;}88.59649122807016% { margin-left: -4.5ch;}88.60649122807017% { margin-left: -5ch;}89.47368421052632% { margin-left: -5ch;}89.48368421052632% { margin-left: -5ch;}90.35087719298245% { margin-left: -5ch;}90.36087719298246% { margin-left: -4.5ch;}91.22807017543859% { margin-left: -4.5ch;}91.2380701754386% { margin-left: -4ch;}92.10526315789473% { margin-left: -4ch;}92.11526315789473% { margin-left: -3.5ch;}92.98245614035088% { margin-left: -3.5ch;}92.99245614035088% { margin-left: -3ch;}93.85964912280701% { margin-left: -3ch;}93.86964912280702% { margin-left: -2.5ch;}94.73684210526315% { margin-left: -2.5ch;}94.74684210526316% { margin-left: -2ch;}95.61403508771929% { margin-left: -2ch;}95.62403508771929% { margin-left: -1.5ch;}96.49122807017544% { margin-left: -1.5ch;}96.50122807017544% { margin-left: -1ch;}97.36842105263158% { margin-left: -1ch;}97.37842105263158% { margin-left: -0.5ch;}98.24561403508771% { margin-left: -0.5ch;}98.25561403508772% { margin-left: -0ch;}99.12280701754385% { margin-left: -0ch;}99.13280701754385% { margin-left: -0.5ch;}}@keyframes write {0% { width: 0ch; opacity: 1;}0.01% { width: 1ch; opacity: 1;}0.8771929824561403% { width: 1ch; opacity: 1;}0.8871929824561403% { width: 2ch; opacity: 1;}1.7543859649122806% { width: 2ch; opacity: 1;}1.7643859649122806% { width: 3ch; opacity: 1;}2.631578947368421% { width: 3ch; opacity: 1;}2.6415789473684206% { width: 4ch; opacity: 1;}3.508771929824561% { width: 4ch; opacity: 1;}3.518771929824561% { width: 5ch; opacity: 1;}4.385964912280701% { width: 5ch; opacity: 1;}4.395964912280701% { width: 6ch; opacity: 1;}5.263157894736842% { width: 6ch; opacity: 1;}5.273157894736841% { width: 7ch; opacity: 1;}6.140350877192982% { width: 7ch; opacity: 1;}6.150350877192982% { width: 8ch; opacity: 1;}7.017543859649122% { width: 8ch; opacity: 1;}7.027543859649122% { width: 9ch; opacity: 1;}7.894736842105263% { width: 9ch; opacity: 1;}7.904736842105263% { width: 10ch; opacity: 1;}8.771929824561402% { width: 10ch; opacity: 1;}8.781929824561402% { width: 10ch; opacity: 1;}9.649122807017543% { width: 10ch; margin-left: -0ch;}9.659122807017543% { width: 9ch; margin-left: -0ch; opacity: 1;}10.526315789473683% { width: 9ch; margin-left: -0ch;}10.536315789473683% { width: 8ch; margin-left: -0ch; opacity: 1;}11.403508771929824% { width: 8ch; margin-left: -0ch;}11.413508771929823% { width: 7ch; margin-left: -0ch; opacity: 1;}12.280701754385964% { width: 7ch; margin-left: -0ch;}12.290701754385964% { width: 6ch; margin-left: -0ch; opacity: 1;}13.157894736842104% { width: 6ch; margin-left: -0ch;}13.167894736842104% { width: 5ch; margin-left: -0ch; opacity: 1;}14.035087719298245% { width: 5ch; margin-left: -0ch;}14.045087719298245% { width: 4ch; margin-left: -0ch; opacity: 1;}14.912280701754385% { width: 4ch; margin-left: -0ch;}14.922280701754385% { width: 3ch; margin-left: -0ch; opacity: 1;}15.789473684210526% { width: 3ch; margin-left: -0ch;}15.799473684210525% { width: 2ch; margin-left: -0ch; opacity: 1;}16.666666666666664% { width: 2ch; margin-left: -0ch;}16.676666666666666% { width: 1ch; margin-left: -0ch; opacity: 1;}17.543859649122805% { width: 1ch; margin-left: -0ch;}17.553859649122806% { width: 0ch; margin-left: -0ch; opacity: 1;}18.421052631578945% { width: 0ch; margin-left: -0ch;}18.431052631578947% { width: 10ch; margin-left: -11ch; opacity: 1;}19.298245614035086% { width: 11ch; opacity: 1;}19.308245614035087% { width: 12ch; opacity: 1;}20.175438596491226% { width: 12ch; opacity: 1;}20.185438596491228% { width: 13ch; opacity: 1;}21.052631578947366% { width: 13ch; opacity: 1;}21.062631578947368% { width: 14ch; opacity: 1;}21.929824561403507% { width: 14ch; opacity: 1;}21.93982456140351% { width: 15ch; opacity: 1;}22.807017543859647% { width: 15ch; opacity: 1;}22.81701754385965% { width: 16ch; opacity: 1;}23.684210526315788% { width: 16ch; opacity: 1;}23.69421052631579% { width: 17ch; opacity: 1;}24.561403508771928% { width: 17ch; opacity: 1;}24.57140350877193% { width: 18ch; opacity: 1;}25.43859649122807% { width: 18ch; opacity: 1;}25.44859649122807% { width: 19ch; opacity: 1;}26.31578947368421% { width: 19ch; opacity: 1;}26.32578947368421% { width: 20ch; opacity: 1;}27.19298245614035% { width: 20ch; opacity: 1;}27.20298245614035% { width: 21ch; opacity: 1;}28.07017543859649% { width: 21ch; opacity: 1;}28.08017543859649% { width: 22ch; opacity: 1;}28.94736842105263% { width: 22ch; opacity: 1;}28.95736842105263% { width: 23ch; opacity: 1;}29.82456140350877% { width: 23ch; opacity: 1;}29.834561403508772% { width: 24ch; opacity: 1;}30.70175438596491% { width: 24ch; opacity: 1;}30.711754385964912% { width: 25ch; opacity: 1;}31.57894736842105% { width: 25ch; opacity: 1;}31.588947368421053% { width: 26ch; opacity: 1;}32.45614035087719% { width: 26ch; opacity: 1;}32.46614035087719% { width: 27ch; opacity: 1;}33.33333333333333% { width: 27ch; opacity: 1;}33.34333333333333% { width: 27ch; opacity: 1;}34.21052631578947% { width: 27ch; margin-left: -11ch;}34.22052631578947% { width: 26ch; margin-left: -11ch; opacity: 1;}35.08771929824561% { width: 26ch; margin-left: -11ch;}35.09771929824561% { width: 25ch; margin-left: -11ch; opacity: 1;}35.96491228070175% { width: 25ch; margin-left: -11ch;}35.97491228070175% { width: 24ch; margin-left: -11ch; opacity: 1;}36.84210526315789% { width: 24ch; margin-left: -11ch;}36.85210526315789% { width: 23ch; margin-left: -11ch; opacity: 1;}37.719298245614034% { width: 23ch; margin-left: -11ch;}37.72929824561403% { width: 22ch; margin-left: -11ch; opacity: 1;}38.59649122807017% { width: 22ch; margin-left: -11ch;}38.60649122807017% { width: 21ch; margin-left: -11ch; opacity: 1;}39.473684210526315% { width: 21ch; margin-left: -11ch;}39.48368421052631% { width: 20ch; margin-left: -11ch; opacity: 1;}40.35087719298245% { width: 20ch; margin-left: -11ch;}40.36087719298245% { width: 19ch; margin-left: -11ch; opacity: 1;}41.228070175438596% { width: 19ch; margin-left: -11ch;}41.238070175438594% { width: 18ch; margin-left: -11ch; opacity: 1;}42.10526315789473% { width: 18ch; margin-left: -11ch;}42.11526315789473% { width: 17ch; margin-left: -11ch; opacity: 1;}42.98245614035088% { width: 17ch; margin-left: -11ch;}42.992456140350875% { width: 16ch; margin-left: -11ch; opacity: 1;}43.859649122807014% { width: 16ch; margin-left: -11ch;}43.86964912280701% { width: 15ch; margin-left: -11ch; opacity: 1;}44.73684210526316% { width: 15ch; margin-left: -11ch;}44.746842105263156% { width: 14ch; margin-left: -11ch; opacity: 1;}45.614035087719294% { width: 14ch; margin-left: -11ch;}45.62403508771929% { width: 13ch; margin-left: -11ch; opacity: 1;}46.49122807017544% { width: 13ch; margin-left: -11ch;}46.501228070175436% { width: 12ch; margin-left: -11ch; opacity: 1;}47.368421052631575% { width: 12ch; margin-left: -11ch;}47.37842105263157% { width: 11ch; margin-left: -11ch; opacity: 1;}48.24561403508772% { width: 11ch; margin-left: -11ch;}48.25561403508772% { width: 27ch; margin-left: -28ch; opacity: 1;}49.122807017543856% { width: 28ch; opacity: 1;}49.132807017543854% { width: 29ch; opacity: 1;}50% { width: 29ch; opacity: 1;}50.01% { width: 30ch; opacity: 1;}50.87719298245614% { width: 30ch; opacity: 1;}50.887192982456135% { width: 31ch; opacity: 1;}51.75438596491228% { width: 31ch; opacity: 1;}51.76438596491228% { width: 32ch; opacity: 1;}52.63157894736842% { width: 32ch; opacity: 1;}52.641578947368416% { width: 33ch; opacity: 1;}53.50877192982456% { width: 33ch; opacity: 1;}53.51877192982456% { width: 34ch; opacity: 1;}54.3859649122807% { width: 34ch; opacity: 1;}54.3959649122807% { width: 35ch; opacity: 1;}55.26315789473684% { width: 35ch; opacity: 1;}55.27315789473684% { width: 36ch; opacity: 1;}56.14035087719298% { width: 36ch; opacity: 1;}56.15035087719298% { width: 37ch; opacity: 1;}57.017543859649116% { width: 37ch; opacity: 1;}57.027543859649114% { width: 38ch; opacity: 1;}57.89473684210526% { width: 38ch; opacity: 1;}57.90473684210526% { width: 39ch; opacity: 1;}58.7719298245614% { width: 39ch; opacity: 1;}58.781929824561395% { width: 40ch; opacity: 1;}59.64912280701754% { width: 40ch; opacity: 1;}59.65912280701754% { width: 41ch; opacity: 1;}60.52631578947368% { width: 41ch; opacity: 1;}60.536315789473676% { width: 42ch; opacity: 1;}61.40350877192982% { width: 42ch; opacity: 1;}61.41350877192982% { width: 43ch; opacity: 1;}62.28070175438596% { width: 43ch; opacity: 1;}62.29070175438596% { width: 44ch; opacity: 1;}63.1578947368421% { width: 44ch; opacity: 1;}63.1678947368421% { width: 45ch; opacity: 1;}64.03508771929825% { width: 45ch; opacity: 1;}64.04508771929825% { width: 45ch; opacity: 1;}64.91228070175438% { width: 45ch; margin-left: -28ch;}64.92228070175439% { width: 44ch; margin-left: -28ch; opacity: 1;}65.78947368421052% { width: 44ch; margin-left: -28ch;}65.79947368421053% { width: 43ch; margin-left: -28ch; opacity: 1;}66.66666666666666% { width: 43ch; margin-left: -28ch;}66.67666666666666% { width: 42ch; margin-left: -28ch; opacity: 1;}67.54385964912281% { width: 42ch; margin-left: -28ch;}67.55385964912281% { width: 41ch; margin-left: -28ch; opacity: 1;}68.42105263157895% { width: 41ch; margin-left: -28ch;}68.43105263157895% { width: 40ch; margin-left: -28ch; opacity: 1;}69.29824561403508% { width: 40ch; margin-left: -28ch;}69.30824561403509% { width: 39ch; margin-left: -28ch; opacity: 1;}70.17543859649122% { width: 39ch; margin-left: -28ch;}70.18543859649122% { width: 38ch; margin-left: -28ch; opacity: 1;}71.05263157894737% { width: 38ch; margin-left: -28ch;}71.06263157894738% { width: 37ch; margin-left: -28ch; opacity: 1;}71.9298245614035% { width: 37ch; margin-left: -28ch;}71.93982456140351% { width: 36ch; margin-left: -28ch; opacity: 1;}72.80701754385964% { width: 36ch; margin-left: -28ch;}72.81701754385965% { width: 35ch; margin-left: -28ch; opacity: 1;}73.68421052631578% { width: 35ch; margin-left: -28ch;}73.69421052631579% { width: 34ch; margin-left: -28ch; opacity: 1;}74.56140350877193% { width: 34ch; margin-left: -28ch;}74.57140350877194% { width: 33ch; margin-left: -28ch; opacity: 1;}75.43859649122807% { width: 33ch; margin-left: -28ch;}75.44859649122807% { width: 32ch; margin-left: -28ch; opacity: 1;}76.3157894736842% { width: 32ch; margin-left: -28ch;}76.32578947368421% { width: 31ch; margin-left: -28ch; opacity: 1;}77.19298245614034% { width: 31ch; margin-left: -28ch;}77.20298245614035% { width: 30ch; margin-left: -28ch; opacity: 1;}78.0701754385965% { width: 30ch; margin-left: -28ch;}78.0801754385965% { width: 29ch; margin-left: -28ch; opacity: 1;}78.94736842105263% { width: 29ch; margin-left: -28ch;}78.95736842105264% { width: 28ch; margin-left: -28ch; opacity: 1;}79.82456140350877% { width: 28ch; margin-left: -28ch;}79.83456140350877% { width: 45ch; margin-left: -46ch; opacity: 1;}80.7017543859649% { width: 46ch; opacity: 1;}80.71175438596491% { width: 47ch; opacity: 1;}81.57894736842105% { width: 47ch; opacity: 1;}81.58894736842106% { width: 48ch; opacity: 1;}82.45614035087719% { width: 48ch; opacity: 1;}82.4661403508772% { width: 49ch; opacity: 1;}83.33333333333333% { width: 49ch; opacity: 1;}83.34333333333333% { width: 50ch; opacity: 1;}84.21052631578947% { width: 50ch; opacity: 1;}84.22052631578947% { width: 51ch; opacity: 1;}85.0877192982456% { width: 51ch; opacity: 1;}85.09771929824561% { width: 52ch; opacity: 1;}85.96491228070175% { width: 52ch; opacity: 1;}85.97491228070176% { width: 53ch; opacity: 1;}86.84210526315789% { width: 53ch; opacity: 1;}86.8521052631579% { width: 54ch; opacity: 1;}87.71929824561403% { width: 54ch; opacity: 1;}87.72929824561403% { width: 55ch; opacity: 1;}88.59649122807016% { width: 55ch; opacity: 1;}88.60649122807017% { width: 56ch; opacity: 1;}89.47368421052632% { width: 56ch; opacity: 1;}89.48368421052632% { width: 56ch; opacity: 1;}90.35087719298245% { width: 56ch; margin-left: -46ch;}90.36087719298246% { width: 55ch; margin-left: -46ch; opacity: 1;}91.22807017543859% { width: 55ch; margin-left: -46ch;}91.2380701754386% { width: 54ch; margin-left: -46ch; opacity: 1;}92.10526315789473% { width: 54ch; margin-left: -46ch;}92.11526315789473% { width: 53ch; margin-left: -46ch; opacity: 1;}92.98245614035088% { width: 53ch; margin-left: -46ch;}92.99245614035088% { width: 52ch; margin-left: -46ch; opacity: 1;}93.85964912280701% { width: 52ch; margin-left: -46ch;}93.86964912280702% { width: 51ch; margin-left: -46ch; opacity: 1;}94.73684210526315% { width: 51ch; margin-left: -46ch;}94.74684210526316% { width: 50ch; margin-left: -46ch; opacity: 1;}95.61403508771929% { width: 50ch; margin-left: -46ch;}95.62403508771929% { width: 49ch; margin-left: -46ch; opacity: 1;}96.49122807017544% { width: 49ch; margin-left: -46ch;}96.50122807017544% { width: 48ch; margin-left: -46ch; opacity: 1;}97.36842105263158% { width: 48ch; margin-left: -46ch;}97.37842105263158% { width: 47ch; margin-left: -46ch; opacity: 1;}98.24561403508771% { width: 47ch; margin-left: -46ch;}98.25561403508772% { width: 46ch; margin-left: -46ch; opacity: 1;}99.12280701754385% { width: 46ch; margin-left: -46ch;}99.13280701754385% { width: 0; margin-left: 0; display: none; opacity:0;}100% { width: 0; margin-left: 0; display: none; opacity:0;}}</style></head>
<div class="typewriter">TRANSFORM YOUR BRAND THROUGH<br>
  <div class="typewriterinner"></div>
</div>

推荐阅读