纯CSS特效动画

心得体会：CSS3动画怎么实现每个一段时间播放一次
比如你的动画时间为5秒，你想让循环中间隔5秒，
那你可以把你的动画时间设置为10秒，但是动画的动作要在5秒也就是50%的时候执行完，留下5秒的停顿，这样就会造成了间隔效果了，
每次播放时，5秒钟执行完你想要的动画效果，停顿5秒，
还有一个办法就是通过JS来计时触发，做个计时器，到时间就触发一次

1. 呼吸灯效果

@keyframes breathe {
  0% {opacity: 1;}
  50% {opacity: 0.5;}
  100% {opacity: 1;}
}
.light {
  animation: breathe 2s infinite;
}

2. 文字跳动效果

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}
.text {
  animation: bounce 1s infinite;
}

3. 鼠标悬停放大效果

.zoom:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}

4. 无限滚动背景

@keyframes scroll {
  0% {background-position: 0 0;}
  100% {background-position: -100% 0;}
}
.bg {
  animation: scroll 5s linear infinite;
  background-size: 200% auto;
}

5. 图片淡入淡出

@keyframes fade {
  0% {opacity: 0;}
  50% {opacity: 1;}
  100% {opacity: 0;}
}
.image {
  animation: fade 3s infinite;
}

6. 旋转立方体

.cube {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  animation: rotate 5s infinite linear;
}
​
@keyframes rotate {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(1turn); }
}

7. 波浪效果

@keyframes wave {
  0% {transform: translateY(0);}
  50% {transform: translateY(-10px);}
  100% {transform: translateY(0);}
}
.wave {
  animation: wave 2s infinite;
}

8. 文字描边效果

.text {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

9.铃铛左右摇摆

.icon-ring {
  animation: ringing 5s infinite ease;
}

@keyframes ringing {
  10% {
    transform: rotateZ(15deg);
    transform-origin: 50% 0%;
  }

  20% {
    transform: rotateZ(-15deg);
    transform-origin: 50% 0%;
  }

  30% {
    transform: rotateZ(20deg);
    transform-origin: 50% 0%;
  }

  40% {
    transform: rotateZ(-20deg);
    transform-origin: 50% 0%;
  }

  50% {
    transform: rotateZ(15deg);
    transform-origin: 50% 0%;
  }

  60% {
    transform: rotateZ(-15deg);
    transform-origin: 50% 0%;
  }

  70% {
    transform: rotateZ(0);
    transform-origin: 50% 0%;
  }

  100% {
    transform: rotateZ(0);
    transform-origin: 50% 0%;
  }
}

10.文字颜色变换效果

.datetxt {
  animation: colors 1.5s ease-in-out infinite alternate;
}

@keyframes colors {
  0% {
    color: #F15F79;
  }

  50% {
    color: #419286;
  }

  100% {
    color: #F15F79;
  }
}

11.中心向外扩散并消失效果

.contact {
  animation: glowing-pulse 3s infinite;
}

@keyframes glowing-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(54, 158, 118, 0.7);
  }

  70% {
    box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}