CSS3 keyframe 红包动画

最新推荐文章于 2024-05-13 14:34:46 发布

转载最新推荐文章于 2024-05-13 14:34:46 发布 · 761 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/linxue/p/9633594.html

本文详细介绍了如何使用CSS3的关键帧动画（keyframe animation）、transform和transition属性来创建一个简单的红包放大缩小动画效果。通过设置动画时长为4秒，实际运动时间为1秒左右，以增加动画的间隔感。代码示例展示了动画的实现过程。

项目专题页需要有一个红包的动画，就做了一个最简单的放大缩小的动画效果，主要用到的就是 CSS3 的 keyframe 动画和 transform、transition 属性。为了使动画看起来更舒适，我把动画时长设置成4S，而实际运动的时长只有1S左右，来达到增加动画间隔的效果。
代码如下：

.hongbao{
    animation: hongBao 4s ease infinite;
}
@keyframes hongBao{
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);    
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  55% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  60% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  65% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }  
}
@keyframes hongBao{
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);    
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  55% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  60% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  65% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }  
}