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

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 ]]*

独立属性

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

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

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

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

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

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

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

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

 

<!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>

jquery点击控制动画暂停开始的更多相关文章

  1. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  2. 测开之路一百零一：jquery文字特效、动画、方法链

    文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...

  3. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. WPF控制动画开始、停止、暂停和恢复

    1.闲言 好久也没更新一博客了,自己有点发懒,同时确实这几个月来也有点忙.风机监测软件,项目中,有这样一个小需求:正常风机在旋转的时候,上位机软要做一个风机的图片,让它不停地旋转,一但检测到下面风机停 ...

  5. CSS3属性animation-play-state控制动画运行或暂停的技巧

    animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{ animation-play-state:paused; -webki ...

  6. 第4章 jQuery的事件和动画（二）

    二. jQuery中的动画 动画在前面几章案例中是回避不了的问题.此处结合一些简便的写法稍作系统的分析. 1. show()和hide()(1)介绍——不用过多的介绍了jQuery最基本的方法.本质是 ...

  7. 基于jQuery点击图像居中放大插件Zoom

    分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览   源码下载 实现的代码. ...

  8. 给tabBarItem加点击效果动画

    获取到tabBarItem,添加喜欢的动画 .h文件 @interface JGTabBarController () //记录上一次点击tabbar @property (nonatomic, as ...

  9. JQuery：选择器、动画、AJAX请求

    选择器 1.事件编程与动画效果 一个选择器可以在概念上理解为指针.借助与JQuery库中的选择器$,线程可以获取到界面元素的引用,从而可以调用 ready().click()方法把用户事件和动作方法关 ...

随机推荐

  1. linux性能问题（CPU，内存，磁盘I/O，网络）

    一. CPU性能评估 1.vmstat [-V] [-n] [depay [count]] -V : 打印出版本信息,可选参数 -n : 在周期性循环输出时,头部信息仅显示一次 delay : 两次输 ...

  2. C#中的ref和out的区别

    转载原地址 http://www.cnblogs.com/gjahead/archive/2008/02/28/1084871.html ref和out的区别在C# 中,既可以通过值也可以通过引用传递 ...

  3. UVaLive 6625 Diagrams & Tableaux (状压DP 或者 DFS暴力)

    题意:给一个的格子图,有 n 行单元格,每行有a[i]个格子,要求往格子中填1~m的数字,要求每个数字大于等于左边的数字,大于上边的数字,问有多少种填充方法. 析:感觉像个DP,但是不会啊...就想暴 ...

  4. Unity3D之Legacy动画系统学习笔记

    Unity3D的Mecanim动画系统是非常强大的,而且作为Unity推荐的动画系统,其未来会完全代替老的一套动画系统,即Legacy动画系统.目前的情况是Mecanim与Legacy两套动画系统同时 ...

  5. UML学习（二）-----类图

    UML学习(二)-----类图 http://www.cnblogs.com/silent2012/archive/2011/09/07/2169946.html http://www.cnblogs ...

  6. Oracle-11g-R2（11.2.0.3.x）RAC Oracle Grid & Database 零宕机方式升级 PSU（自动模式）

    升级环境: 1.源库版本: Grid Infrastructure:11.2.0.3.13 Database:11.2.0.3.13 2.目标库版本: Grid Infrastructure:11.2 ...

  7. GitHub-撤销commit

    以下方法适用于:撤销最后一次提交的情况 步骤如下: 步骤1.使用 ”git log“ 命令 找到 想要撤销的操作之前的一次提交的commit id : 比如:使用 git log命令如下结果 comm ...

  8. npm package 装包匹配原则

    经常看到package.json 里面有这样的devDependencies: "devDependencies": { "@angular/common": ...

  9. 解决ArcGIS Engine AE 读取shapefile中文属性乱码的一条偏方

    最近写一个程序,AE+C#,读shp字段属性,其中读到中文就乱码了 这个问题比较奇怪,用AE很多年了,怎么突然就乱码呢,用Arcmap打开,没乱码,证明不是数据问题 网上搜搜,很多人说是许可初始化的问 ...

  10. Codeforces Gym 100114 A. Hanoi tower 找规律

    A. Hanoi tower Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100114 Descript ...