控制CSS animation动画暂停或运行的样式属性animation-play-state代码

Web前端开发 / 2749 次阅读

animation 动画是经常会使用到的CSS3样式属性，通常是用来运行 @keyframes 定义动画，在网页开发过程中，想暂停 animation 动画要怎么做？CSS3 提供了 animation-play-state 属性，该属性的作用是运行或者暂停动画，支持该属性的浏览器版本 Chrome 43+(4.0 -webkit-)、IE10+、Firefox 16+(5.0 -moz-)、Safari 9.0+、Opera 30+(12.0 -o-)。

语法 

animation-play-state: paused|running;
参数
  • paused - 暂停动画
  • running - 运行动画
示例：鼠标悬浮时暂停动画

CSS 示例 

.move {
	animation:move 3s linear 0s infinite;
}
.move:hover {
	animation-play-state:paused
}

Javascript 示例 

var move = document.querySelector('.move');
move.onmouseenter = function(){
	move.style.animationPlayState = 'paused';
}
move.onmouseleave = function(){
	move.style.animationPlayState = 'running';
}

jQuery 示例 

$('.move').mouseenter(function(){
	$(this).attr('animationPlayState','paused');
}).mouseleave(function(){
	$(this).attr('animationPlayState','running');
});

很简单，就是改一个CSS属性的值。