一些关键帧动画(内附7个在线demo)

2023-06-11 358 阅读3分钟

在日常的h5开发过程中，由于涉及到一些营销相关的内容，所以免不了需要做一些动画效果。个人觉得关键帧动画复用性还是比较高的，所以在这里记录一下，需要的朋友可以自取。

奖励弹窗翻转效果

代码：

@keyframes popup-filp {
    0% {
      transform: scale(0) rotateY(0deg);
    }

    18% {
      transform: scale(1) rotateY(-380deg);
    }

    32% {
      transform: scale(1) rotateY(-351deg);
    }

    42% {
      transform: scale(1) rotateY(-370deg);
    }

    100% {
      transform: scale(1) rotateY(-360deg);
    }
  }

  .popup-animation {
    width: 375px;
    height: 472.5px;
    background-image: url('https://zaoren-blog.oss-cn-beijing.aliyuncs.com/blog/%E5%BC%B9%E7%AA%97-2.png');
    background-repeat: no-repeat;
    background-size: contain;
    animation: mars-ani-CARD 3.55s linear forwards 1;
  }

光线闪烁效果

代码：

@keyframes LIGHT4 {
    0% {
      transform: scale(0);
      opacity: 1;
    }

    40% {
      transform: scale(1.45);
      opacity: 1;
    }

    55% {
      transform: scale(1.45);
      opacity: .99;
    }

    100% {
      transform: scale(1.22);
      opacity: 0;
    }
  }


 @keyframes LIGHT5 {
    0% {
      transform: rotateZ(0deg);
    }

    100% {
      transform: rotateZ(360deg);
    }
  }

.animation-element-light4 {
    position: absolute;
    width: 375px;
    height: 375px;
    transform-origin: center;
    animation: LIGHT4 3s linear none infinite 0s;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://zaoren-blog.oss-cn-beijing.aliyuncs.com/blog/454775b5-f962-49d0-b4f4-90f2fe1cd4e7.png');
  }

 .animation-element-light5 {
    position: absolute;
    width: 448px;
    height: 440px;
    scale: 1.99;
    transform-origin: center;
    animation: LIGHT5 10s linear none infinite 0.13s;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('https://zaoren-blog.oss-cn-beijing.aliyuncs.com/blog/a522ff12-20ca-462a-9ff5-5ff1ea67c83c.png');
  }

诱导点击效果

代码：

@keyframes finger-heartbeat {
    0% {
      transform: translateX(21%) translateY(21%);
    }

    45% {
      transform: translateX(0) translateY(0);
    }

    55% {
      transform: scale(0.9);
    }

    100% {
      transform: translateX(21%) translateY(21%);
    }
  }

.finger {
  top: 40px;
  left: 40px;
  width: 41px;
  height: 41px;
  position: absolute;
  background-image: url('https://zaoren-blog.oss-cn-beijing.aliyuncs.com/blog/finger@2x.png');
  background-repeat: none;
  background-size: contain;
  animation: finger-heartbeat 1s linear 0s infinite;
}

箭头增长膨胀效果

代码：

 @keyframes arrow-heartbeat {
  0% {
    transform: scale(1);
    transform-origin: bottom;
  }

  50% {
    transform: scale(1.2);
    transform-origin: bottom;
  }

  100% {
    transform: scale(1);
    transform-origin: bottom;
  }
}

.arrow-grow {
  position: absolute;
  content: '';
  top: 40px;
  left: 40px;
  width: 26px;
  height: 23px;
  background-image: url('https://zaoren-blog.oss-cn-beijing.aliyuncs.com/blog/涨-箭头@2x.png');
  background-size: contain;
  background-repeat: no-repeat;
  animation: arrow-heartbeat 1s linear 0s infinite;
}

卡片膨胀效果

代码：

@keyframes expansion {
  0% {
    transform: scale(1);
    transform-origin: center;
  }

  40% {
    transform: scale(0.2) translate(0);
    transform-origin: center;
  }

  41% {
    transform: scale(0.2) translate(-2px, 2px);
  }

  42% {
    transform: scale(0.2) translate(0);
  }

  43% {
    transform: scale(0.2) translate(-2px, 2px);
  }

  44% {
    transform: scale(0.2) translate(-2px, -2px);
  }

  45% {
    transform: scale(0.2) translate(2px, 2px);
  }

  46% {
    transform: scale(0.2) translate(2px, -2px);
  }

  47% {
    transform: scale(0.2) translate(0);
  }

  48% {
    transform: scale(0.2) translate(-2px, 2px);
  }

  49% {
    transform: scale(0.2) translate(0);
  }

  50% {
    transform: scale(0.2) translate(-2px, 2px);
  }

  51% {
    transform: scale(0.2) translate(-2px, -2px);
  }

  52% {
    transform: scale(0.2) translate(2px, 2px);
  }

  53% {
    transform: scale(0.2) translate(2px, -2px);
  }

  54% {
    transform: scale(0.2) translate(0);
  }

  100% {
    transform: scale(1);
  }
}

.animation-container {
  width: 375px;
  height: 812px;
  position: fixed;
  background: rgba(0, 0, 0, 0.20);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup-reward__bg--1 {
  width: 270.5px;
  height: 326.5px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url('https://zaoren-blog.oss-cn-beijing.aliyuncs.com/blog/popup-redpacket2%402x.png');
}

.expansioning-animation {
  animation: expansion 2s linear 0s 1;
}

标签滑光效果

代码：

@keyframes searchLights {
    0% {
      left: 0;
      top: 0;
    }

    100% {
      left: 200px;
      top: 0px;
    }
  }

  .expansion-coupon__tips {
    position: absolute;
    top: 40px;
    left: 40px;
    display: inline-block;
    background-image: linear-gradient(97deg, #FFFBF2 0%, #FFDEB4 100%);
    border-radius: 11px 11px 11px 0px;
    font-family: PingFangSC-Medium;
    font-size: 10px;
    color: #28282D;
    letter-spacing: 0;
    line-height: 18px;
    font-weight: 500;
    padding: 0px 15px 0px 15px;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 #E0A070;
  }

  .amount {
    font-family: PingFangSC-Medium;
    font-size: 10px;
    color: #FA6400;
    line-height: 14px;
    font-weight: 500;
  }

  .expansion-coupon__tips::before {
    content: "";
    position: absolute;
    width: 30px;
    height: 18px;
    /**白光的宽度，可根据实际调整**/
    background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5), transparent);
    transform: rotate(-45deg);
    animation: searchLights 1.2s linear 1.5s infinite;
    /**第一个数字参数控制扫光速度，数字越大越慢**/
  }

...Loading效果

 span {
    display: inline-block;
    height: 1em;
    line-height: 1;
    text-align: left;
    vertical-align: -0.25em;
    /* 属性设置元素的垂直对齐方式。指定为负长度，可以使元素降低 */
    overflow: hidden;
  }

  span::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    /* 保留空白符序列 */
    animation: dot 1s infinite step-start both;
  }

  @keyframes dot {
    33% {
      transform: translateY(-2em);
    }

    66% {
      transform: translateY(-1em);
    }
  }