常用动画特效 - CSS实现

不是样式的生产者，只是样式的搬运工

项目开发中用到的特效，在此规整，方便以后使用

/* 闪烁特效 */
.class-name{
  -webkit-animation: twinkling 1s infinite ease-in-out
}
.animated{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
@-webkit-keyframes twinkling{
  0%{
    opacity: 0.5;
  }
  100%{
    opacity: 1;
  }
}
@keyframes twinkling{
  0%{
    opacity: 0.5;
  }
  100%{
    opacity: 1;
  }
}

 

/* 上下跳动特效 */
.class-name{
  -webkit-animation: bounce-down 1s linear infinite;animation: bounce-down 1s linear infinite;
}
@-webkit-keyframes bounce-down {
  25% {-webkit-transform: translateY(-6px);}
  50%, 100% {-webkit-transform: translateY(0);}
  75% {-webkit-transform: translateY(6px);}
}
@keyframes bounce-down {
  25% {transform: translateY(-6px);}
  50%, 100% {transform: translateY(0);}
  75% {transform: translateY(6px);}
}

/* 左右抖动特效 */
@-webkit-keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}
@-moz-keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}
@-o-keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}
@keyframes zy{
  10% {
    transform: rotate(15deg);
  }
  20% {
    transform: rotate(-10deg);
  }
  30% {
    transform: rotate(5deg);
  }
  40% {
    transform: rotate(-5deg);
  }
  50%,100% {
    transform: rotate(0deg);
  }
}


.shake-zy{
  animation: zy 2.5s .15s linear infinite;
  -moz-animation: zy 2.5s .15s linear infinite; /* Firefox */
  -webkit-animation: zy 2.5s .15s linear infinite; /* Safari and Chrome */
  -o-animation: zy 2.5s .15s linear infinite; /* Opera */
}

/* 扫描动画特效 */
.swiper-animate {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  border-bottom: 3px solid #349587;
  background: linear-gradient(180deg,transparent,#349587); // 也可以用图片做背景，如网格图片
  animation: scan 1.2s ease-in-out infinite;
  -webkit-animation: scan 1.2s ease-in-out infinite;
}
@keyframes scan{
  0%{
    height:0
  }
  to{
    opacity:0;
    height:300px; // 扫描框的高度，根据情况调整
  }
}
@-webkit-keyframes scan {
  0%{
    height:0
  }
  to{
    opacity:0;
    height:300px; // 扫描框的高度，根据情况调整
  }
}