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

实现向右移动动画

如果我们想要一个按钮，控制一个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);
}

2.通过transform + transition

实现思路：使用transform属性里的translateX来完成移动，并且使用transition的过渡效果。

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

CSS代码：

#box{width:100px;height:100px;background:red;transition:all 2s;
}
#box.move{transform:translateX(100px);
}

CSS核心代码有两行：

1.transition:all 2s; 让整个移动在2s内完成，transition的作用是给我开头和结尾，我来补充中间帧。

2.transform:translateX(100px);实现右移100px。

JS代码：

function startMove(){box.classList.add('move')
}

3.使用animation

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

animation的核心就是定义关键帧，其中move是这个动画的名字。

@keyframes move{0%{transform:translateX(0px);}100%{transform:translateX(100px)}
}

然后，写一个move类，指定让move运行2s。

#box.move{animation:move 2s;
}

然后，JS添加上这个类。

start.addEventListener('click',()=>{box.classList.add('move');
})

关于transition的总结

有些属性不能用transition，比如display:block变成display:none

当我们想做的动画效果是想让一个显示的div消失，可以有两种方法：

1.用Opacity，最开始设置opacity:1，点击按钮后设置opacity:0

但是，opacity后，这个元素仍然占有相应的空间，所以还应该用JS去掉这个元素，可以用的事件是transitionend

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

start.addEventListener('click',()=>{box.classList.add('end');
});

box.addEventListener('transitionend',()=>{box.remove();
});

2.还可以改用visibility:visible 改为 hidden

总结：可以用opacity : 1 -> 0 或者 visibility: visible -> hidden 替代 display: block -> none

关于animation的总结

1.animation组成部分：

<1>关键帧keyframes

<2>animation属性，animation: 动画名称(必需),执行一次所需时间(必需),动画在开始前的延迟时间，动画的运行速度轨迹(linear:匀速，默认ease:低速-加速-低速)，动画的播放次数(infinite:无限循环)

2.稍微复杂一点的动画

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

实现效果如下：

代码如下：

注意：animation-play-state 和 animationPlayState的书写方式

实现一颗跳动的爱心

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