@Keyframes 缩放变换站点主体

Question

如何使用@keyframes 缩放变换（放大）我的 HTML <body></body> 标签中的所有内容？

有没有办法使用关键帧来代替我的body:hover临时解决方案？

当网站页面首次加载时，正文应在 1.5 秒内缩放 1.01。

body {
    transition: all 1.5s ease-in-out;
    transform: scale(1.00);

}

body:hover {
    transition: all 1.5s ease-in-out;
    transform: scale(1.01);
}

Answer 1

像这样使用 css 动画

@keyframes anime {
  0% {
    transform: scale(1.00);
  }
  100% {
    transform: scale(1.01);
  }
}

@-webkit-keyframes anime {
  0% {
    transform: scale(1.00);
  }
  100% {
    transform: scale(1.01);
  }
}

@-moz-keyframes anime {
  0% {
    transform: scale(1.00);
  }
  100% {
    transform: scale(1.01);
  }
}

@-o-keyframes anime {
  0% {
    transform: scale(1.00);
  }
  100% {
    transform: scale(1.01);
  }
}

body {
  transition: all 1.5s ease-in-out;
  /*     transform: scale(1.00); */
  border: solid red;
  animation-name: anime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

<div>
  The earliest computers dealt with numeric data only, and made no provision for character data. Six-bit BCD was used by IBM on early computers such as the IBM 704 in 1954.[1]:p.35 This encoding was replaced by the 8-bit EBCDIC code when System/360 standardized
  on 8-bit bytes. There are some variants of this type of code (see below). Six-bit character codes generally succeeded the five-bit Baudot code and preceded seven-bit ASCII. One popular variant was DEC SIXBIT. This is simply the ASCII character codes
  from 32 to 95 coded as 0 to 63 by subtracting 32 (i.e., columns 2, 3, 4, and 5 of the ASCII table (16 characters to a column), shifted to columns 0 through 3, by subtracting 2 from the high bits); it includes the space, punctuation characters, numbers,
  and capital letters, but no control characters. Since it included no control characters, not even end-of-line, it was not used for general text processing. However, six-character names such as filenames and assembler symbols could be stored in a single
  36-bit word of PDP-10, and three characters fit in each word of the PDP-1 and two characters fit in each word of the PDP-8. Six-bit codes could encode more than 64 characters by the use of Shift Out and Shift In characters, essentially incorporating
  two distinct 62-character sets and switching between them. For example, the popular IBM 2741 communications terminal supported a variety of character sets of up to 88 printing characters plus control characters.



</div>

@Keyframes 缩放变换站点主体

@Keyframes to scale transform site body

css

transition

transform

keyframe

css-animations