进阶实战项目场动画

1. css 样式

/* page 1 animation */
#page-1 h1{
  transform: translateY(-1200px);
  animation: heading var(--animate-speed) forwards ease-in;
}
#page-1 p {
  transform: translateX(-2000px);
  animation: text var(--animate-speed) forwards ease-in 1s;
}
/* keyframes */
@keyframes heading {
  to {
    transform: translateY(0);
  }
}
@keyframes text {
  to {
    transform: translateX(0);
  }
}