css帧动画点击执行一次_CSS动画深入浅出

最新推荐文章于 2024-07-29 14:14:21 发布

乖巧是我姓名

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量2.3k

点赞数

文章标签： css帧动画点击执行一次

本文链接：https://blog.csdn.net/weixin_35747785/article/details/112116325

版权

本文详细介绍了使用CSS实现按钮控制div向右移动的三种方法：通过设定left、transform + transition和使用animation。同时，总结了transition和animation的适用场景和注意事项，包括如何使用opacity和visibility实现元素的消失效果，以及创建复杂动画和跳动爱心的示例。

摘要由CSDN通过智能技术生成

实现向右移动动画

如果我们想要一个按钮，控制一个div向右移动的动画效果，该怎么实现呢？

有三种实现的方法，下面我们分别介绍三种方法

1.通过设定left

实现思路：通过改变left实现div的右移

实现案例请点击：https://jsbin.com/leduqolugi/edit?html,js,output

JS核心代码：

function startMove(){
    
  var n =0;
  var timer = setInterval(() => {
    
  if(n<=30){
    
    box.style.left = n/100*300 +'px';
    n++;
  }else{
    
    clearInterval(timer);
   }
  },100);
}