css 动画反弹CSS

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 动画反弹CSS相关的知识，希望对你有一定的参考价值。

  .animated {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
  }
  @-webkit-keyframes bounce {
    0%, 100% {
      -webkit-transform: translateY(0);
    }
    50% {
      -webkit-transform: translateY(-5px);
    }
  }
  @keyframes bounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  .bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
  }
 
  hr {
    position: relative;
    top: 92px;
    left: -300px;
    width: 200px;
  }

以上是关于css 动画反弹CSS的主要内容，如果未能解决你的问题，请参考以下文章