jquery点击控制动画暂停开始

时间 2019-11-10

原文原文链接

一下是从w3c上面考下来了的，css

animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*html

独立属性jquery

[ animation-name ]：检索或设置对象所应用的动画名称浏览器

[ animation-duration ]：检索或设置对象动画的持续时间动画

[ animation-timing-function ]：检索或设置对象动画的过渡类型orm

[ animation-delay ]：检索或设置对象动画延迟的时间htm

[ animation-iteration-count ]：检索或设置对象动画的循环次数对象

[ animation-direction ]：检索或设置对象动画在循环中是否反向运动ip

[ animation-play-state ]：检索或设置对象动画的状态。 utf-8

一下是代码部分：写的比较简单，也没有考虑浏览器兼容问题了

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="Keywords" content="" /><meta name="Description" content="" /> <title>vertical-align</title></head><style> .wap{width:200px;height:200px;background:red;} .move{animation:move 3s ease 0s infinite alternate;} @keyframes move{ 0%{opacity:0;transform:rotate(0deg);} 50%{opacity:0.5;transform:rotate(90deg);} 100%{opacity:1;transform:rotate(180deg);} } </style><body> <div class="wap move" onclick="run()"></div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> var flag = true; //用做标志 function run(){ if(flag==true){ $('.move').css('animation-play-state','paused'); //设置动画状态--暂停 flag = false; }else{ $('.move').css('animation-play-state','running');//设置动画状态--开始 flag = true; } } </script> </body>