css动画，放大缩小；元素开始隐藏，延迟后显示动画

效果

1.动画放大缩小，循环

<div class="bigSmall"></div>
/* 放大缩小 */
.bigSmall {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  -webkit-animation: s1 1.5s linear infinite;
}

@-webkit-keyframes s1 {
  0%,
  100% {
    transform: scale(1, 1);
  }

  50% {
    transform: scale(1.1, 1.1);
  }
}

2.右淡入，先隐藏，0.1秒后显示动画

<div class="titleBox"></div>
.titleBox {
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  opacity: 0;
  -webkit-animation: fadeInRight 1s linear 0.1s 1 normal forwards;
}

.titleBoxAni {
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

3.左淡入

<div class="leftSlide "></div>
.leftSlide {
  -webkit-animation: fadeInLeft 1s linear 0.1s 1 normal forwards;
  opacity: 0;
}

/* 左淡入 */
@-webkit-keyframes slideInLeft {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

4.向上淡入

<div class="bottomTitle "></div>
.bottomTitle {
 width: 100px;
  height: 100px;
  background-color: blueviolet;
  visibility: hidden;
  -webkit-animation: slideInUp 1s linear 0.3s 1 normal forwards;
}

@-webkit-keyframes slideInUp {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  100% {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}