关于css transition过渡的问题

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>长得帅是我的错吗</title>
  </head>
  <style media="screen">
    .box{
      width: 200px;
      height: 200px;
      background: pink;
      position: absolute;

    }
    .box{
      animation:trans 2s  infinite;
    }
    @keyframes trans{
      0%{
        top:0px;
      }
      49%{
        top:0px;
      }
      50%{
        top:100px;
      }
      100%{
        top:200px;
      }
    }
  </style>
  <body>
    <div class="box">
      没想到我是个粉色控，我爱小萝莉？
    </div>
  </body>
</html>

Tomoe

6.2k11012

发布于
2016-07-07

更新于
2016-07-07

如果不介意使用 jQuery 的 animate() ，可以挺輕鬆的實現

$('.circle')
.animate({
    top: 30
}, 1)
.animate({
    top: 60
}, {
    duration: 1000,
    easeing: "easein"
})
.animate({
    top: 100
}, {
    duration: 1000,
    easeing: "easein"
})

實現

jsFiddle

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

关于css transition过渡的问题

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？

为什么会出现CORS error？