[分享]css3动画特效大全

CSS3动画是现代网站设计不可或缺的一部分，它能够为网页注入活力，提高用户体验。下面是一些常用的CSS3动画特效。/ 放大动画 / .animatescale { webkittransform: s...

CSS3动画是现代网站设计不可或缺的一部分，它能够为网页注入活力，提高用户体验。下面是一些常用的CSS3动画特效。

/* 放大动画 */
.animate-scale {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}
.animate-scale:hover {
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

/* 旋转动画 */
.animate-rotate {
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}
.animate-rotate:hover {
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

/* 跳动动画 */
.animate-bounce {
  -webkit-animation: bounce 1s infinite;
  animation: bounce 1s infinite;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: translateY(0); }
  50% { -webkit-transform: translateY(-20px); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* 翻转动画 */
.animate-flip {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
  cursor: pointer;
}
.animate-flip:hover {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* 摇晃动画 */
.animate-shake {
  -webkit-animation: shake 1s;
  animation: shake 1s;
}

@-webkit-keyframes shake {
  0%, 100% { -webkit-transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); }
  20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
} 

以上是一些常用的CSS3动画特效，它们能为网页注入活力、提供交互效果、吸引用户的注意力，为用户提供更好的体验。同时，你也可以自行创造出更酷炫的CSS3动画特效。