标签：opacity 动画 50% transform keyframes 一些 floating

//浮动
@keyframes floating{
    0%{
    opacity: 0.8;
        transform: translate(0,0);
    }
    50%{
    opacity: 1;
        transform: translate(0px,3px);
    }
    100%{
    opacity: 0.8;
        transform: translate(0,0);
    }
}
.floating {
  animation: floating 2s linear infinite;
}
//转圈
@keyframes clockwise{
  100%{
    transform: rotate(360deg)
  }
}
@keyframes anti-clockwise{
  0%{
    transform: rotate(360deg)
  }
}
//渐变
@keyframes breath {
  /* 动画开始时的不透明度 */
  from {
      opacity: 0.5;
  }
  /* 动画50% 时的不透明度 */
  50% {
      opacity: 1;
  }
  /* 动画结束时的不透明度 */
  to {
      opacity: 0.5;
  }
}
.twinkle{
  webkit-animation: breath 2s infinite ease-in-out;
  -webkit-animation: breath 2s infinite ease-in-out;
}
//上下跳动
@keyframes animate {
  0%,
  40%,
  100% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(8px);
  }
}

标签：opacity,动画,50%,transform,keyframes,一些,floating
来源： https://www.cnblogs.com/Byme/p/16544214.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。