CSS - animation-play-state 属性_CSS 菜鸟教程

CSS animation-play-state 属性用于指定动画是否正在运行。您可以将此属性与 JavaScript onclick（）函数一起使用，以触发该属性更改状态。

语法


animation-play-state: running | paused| inital| inherit

属性值

值	描述
paused	指定动画暂停。
running	T指定正在播放动画。这是默认值
initial	将属性设置为其初始值。
inherit	将继承父元素的属性。

动画播放状态属性的示例

下面解释了 animation-play-state 属性的一些示例。

运行状态动画

为了使动画播放，我们将运行值赋予 animation-play-state 属性。

在下面的示例中，animation-play-state 已设置为 running，因此球会不断改变其大小。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 body {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: center;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 height: 250px;
	 	 	 	 	 	 margin: 0;
	 	 	 	 	 	 background-color: #f0f0f0;
	 	 	 	 }

	 	 	 	 .circle-demo {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 background-color: #ff6347;
	 	 	 	 	 	 border-radius: 50%;
	 	 	 	 	 	 animation-name: pulse;
	 	 	 	 	 	 animation-duration: 1s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-play-state: running;
	 	 	 	 }

	 	 	 	 @keyframes pulse {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 transform: scale(1);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: scale(1.8);
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: scale(1);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div class="circle-demo"></div>
</body>

</html>

暂停状态动画

为了不让动画播放，我们将暂停的值赋予 animation-play-state 属性

在下面的示例中，animation-play-state 已设置为暂停，因此球没有运动。


<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 body {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: center;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 height: 200px;
	 	 	 	 	 	 margin: 0;
	 	 	 	 	 	 background-color: #f0f0f0;
	 	 	 	 }

	 	 	 	 .circle-demo {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 background-color: #ff6347;
	 	 	 	 	 	 border-radius: 50%;
	 	 	 	 	 	 animation-name: pulse;
	 	 	 	 	 	 animation-duration: 1s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-play-state: paused;
	 	 	 	 }

	 	 	 	 @keyframes pulse {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 transform: scale(1);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: scale(1.8);
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: scale(1);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div class="circle-demo"></div>
</body>

</html>

悬停动画

可以创造性地使用这些值的组合来创建交互式 UI

在以下示例中，使用了 running 和 pauseed 值。将鼠标悬停在球上时，设置了运行状态。远离球，设置暂停状态。


<!DOCTYPE html>
<html>

<head>

	 	 <style>
	 	 	 	 body {
	 	 	 	 	 	 display: flex;
	 	 	 	 	 	 justify-content: center;
	 	 	 	 	 	 align-items: center;
	 	 	 	 	 	 height: 250px;
	 	 	 	 	 	 margin: 0;
	 	 	 	 	 	 background-color: #f0f0f0;
	 	 	 	 }

	 	 	 	 .circle-demo {
	 	 	 	 	 	 width: 100px;
	 	 	 	 	 	 height: 100px;
	 	 	 	 	 	 background-color: #ff6347;
	 	 	 	 	 	 border-radius: 50%;
	 	 	 	 	 	 animation-name: pulse;
	 	 	 	 	 	 animation-duration: 1s;
	 	 	 	 	 	 animation-iteration-count: infinite;
	 	 	 	 	 	 animation-play-state: paused;
	 	 	 	 }

	 	 	 	 .circle-demo:hover {
	 	 	 	 	 	 animation-play-state: running;
	 	 	 	 }

	 	 	 	 @keyframes pulse {
	 	 	 	 	 	 0% {
	 	 	 	 	 	 	 	 transform: scale(1);
	 	 	 	 	 	 }
	 	 	 	 	 	 50% {
	 	 	 	 	 	 	 	 transform: scale(1.8);
	 	 	 	 	 	 }
	 	 	 	 	 	 100% {
	 	 	 	 	 	 	 	 transform: scale(1);
	 	 	 	 	 	 }
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <div class="circle-demo"></div>
</body>

</html>

支持的浏览器

属性
animation-play-state	43.0	10.0	16.0	9.0	30.0

<< CSS - animation-name 属性 CSS - animation-timing-function 属性 >>