• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • animation-play-state

    版本:CSS3

    animation-play-state CSS 属性定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外,它的值可以被设置为暂停和恢复的动画的重放。恢复一个已暂停的动画,将从它开始暂停的时候,而不是从动画序列的起点开始在动画。

    示例

    /* single animation */
    animation-play-state: running;
    animation-play-state: paused;
    
    /* multiple animations */
    animation-play-state: paused, running, running;
    
    /* global values */
    animation-play-state: inherit;
    animation-play-state: initial;
    animation-play-state: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上版本的浏览器都支持animation-play-state

    语法

    animation-play-state:running| paused

    取值

    • running:当前动画正在运行。
    • paused:当前动画以被停止。
    默认值running
    适用于所有元素,包含伪对象::beforeand::after
    继承性
    动画性
    计算值指定值
    媒体视觉<

    实例

    <style type="text/css">
    div{
    	width:100px;
    	height:100px;
    	position:relative;
    	background-color:hsl(120,65%,75%);
    	animation:demo 5s 1;
    	-webkit-animation:demo 5s 1;
    	animation-play-state:paused;
    	-webkit-animation-play-state:paused;
    	}
    @keyframes demo
    {
    	from{left:0px;}
    	to{left:350px;
    }
    }
    /*safari和chrome*/
    @-webkit-keyframes demo
    {
    	from{left:0px;}
    	to{left:350px;}
    }
    </style>
    </head>
    <body>
    	<div></div>	
    </body>

    效果图: