用css3的@keyframes里设置transform:rotate(); 当控制动画暂停:animation-play-state:paused暂停,在微信和safari里无效...
用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animation-play-state:paused(暂停)|running(运动);但是有个让人吐血的问题,不管我怎么调加什么兼容前缀,在微信和safari里设置paused无效,在QQ里是正常的
当@keyframes里不用transform的时候(如:@keyframes{from{width:100px}to{width:200px}),设置宽高背景等等都是没问题的,然后就想到了一个很笨的解决方法:
将图片改为序列图,以关键帧的形式创建动画,这样设置animation-play-state就有效了,css代码如下:
.animate{ -webkit-animation:move 2s steps(15) infinite; animation: move 2s steps(15) infinite; -moz-animation: move 100ms steps(15) infinite;/*序列图有16张*/ -webkit-animation-play-state: paused; animation-play-state: paused;}@-webkit-keyframes change{ 0%{-webkit-transform:rotate(0deg)} 50%{-webkit-transform:rotate(180deg)} 100%{-webkit-transform:rotate(360deg)}}@keyframes change { 0%{transform:rotate(0deg)} 50%{transform:rotate(180deg)} 100%{transform:rotate(360deg)}}@-moz-keyframes change{ 0%{-moz-transform:rotate(0deg)} 50%{-moz-transform:rotate(180deg)} 100%{-moz-transform:rotate(360deg)}}@-webkit-keyframes move{ 0%{background-position-y:-0px} 100%{background-position-y:-600px}}@keyframes move { 0%{background-position-y:-0px} 100%{background-position-y:-600px}}@-moz-keyframes move{ 0%{background-position-y:-0px} 100%{background-position-y:-600px}} js控制暂停播放代码:
var flag = 0;//初始时音乐为暂停状态 $('#music').click(function(){ if(flag==0){ $('#audio').get(0).play(); $('.music').css({'-webkit-animation-play-state':'running','animation-play-state':'running'}); $('.musicMask').hide(); flag=1; }else if(flag==1){ $('#audio').get(0).pause();// $('.music').removeClass('animate'); $('.music').css({'-webkit-animation-play-state':'paused','animation-play-state':'paused'}); $('.musicMask').show(); flag=0; } })
转载于:https://www.cnblogs.com/xunhuang/p/6869103.html
用css3的@keyframes里设置transform:rotate(); 当控制动画暂停:animation-play-state:paused暂停,在微信和safari里无效...相关推荐
- 设置按键退出python pygame动画(animation)程序,python检测键盘按键
功能:设置按键退出python pygame动画(animation)程序,python3.6检测键盘按键 pygame运行起来,不弄个强行终止都刹不住....为此研究了一下怎么退出. 实现的效果是: ...
- css3 animation动画360旋转。旋转效果用transform:rotate过渡。
旋转: <div class="lds-hourglass"></div> .lds-hourglass {display:inline-block;po ...
- transform: rotate(1turn)
transform: rotate(1turn) 以前我也从没写过1turn,但是直觉告诉我这肯定是转一圈的意思 1 turn 相当于1圈,就是360deg; 90deg就是0.25turn; tra ...
- 计算机单元格选项,如何在excel单元格里设置下拉选项
我们在编辑excel表格的时候,填写的很多内容都是相同的,那么我们如何在excel单元格里设置下拉选项呢?下面学习啦小编告诉你! 在excel单元格里设置下拉选项的方法 首先我们先打开excel打开之 ...
- css3 呼吸的莲花_CSS3实现莲花绽放的动画效果
这篇文章我们来讲一下在网站建设中,CSS3实现莲花绽放的动画效果.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 先来看效果: 这效果看起来挺炫,但原理并不复杂,能实现一片花 ...
- CSS3属性animation-play-state控制动画运行或暂停的技巧
animation-play-state介绍 animation-play-state 属性规定动画正在运行还是暂停. div{animation-play-state:paused;-webkit- ...
- 创意css汉堡菜单动画,纯CSS3实现的汉堡菜单、飞碟和小行星动画
CSS 语言: CSSSCSS 确定 html, body { width: 100%; height: 100%; margin: 0; } body { background: #50C9C3; ...
- 企业微信获取客户群里用户的unionid;企业微信获取客户详情
企业微信获取客户群里用户的unionid:企业微信获取客户详情 提示:企业微信获取客户群里用户的unionid其实是通过获取客户详情的接口 文章目录 企业微信获取客户群里用户的unionid:企业微信 ...
- CSS3图片旋转功能transform:rotate以及Canvas旋转示例
<!DOCTYPE html> <html> <head><title>CSS3旋转图片</title><style>.demo ...
最新文章
- 中国移动领取买卖将在2016年破万亿
- hdu 1850 基础尼姆博奕
- 【转】多语言的正则表达式,我们应该掌握
- 垃圾回收机制与引用类型
- Hadoop宿醉:使用Apache Whirr启动hadoop集群CDH4
- SEO关键字优化策略-Google Analytics提高关键字转化的的6步骤
- Mr.J--HanioTower(递归算法)
- angular之DI理解
- Lucene全文检索_分词_复杂搜索_中文分词器
- HDU各种考试题题解
- 数据库实验3 数据库的单表查询
- PHP判断浏览器类型和语言
- Tool-X:在AndroidUbuntu平台安装Kali的各种小工具
- GNSS螺旋天线高精度定位
- 快速压缩Word文档的小妙招
- CSS学习05:文字段落排版
- 两个向量的点乘和叉乘怎么算_点乘和叉乘的区别是什么?
- 抢Google等巨头生意,纽约大学小伙挖掘并出售自己数据
- VSCode小说神器Thief-Book-VSCode页数获取
- 计算机毕业设计Java心理健康管理系统(源码+系统+mysql数据库+Lw文档)
热门文章
- 【mysql】left join on and 和 where的区别
- blog error #include stream.h
- Object Relational Tool Comparison Dot Net
- 面向手绘图形,涵盖多个主题,CVPR 2022 SketchDL Workshop开始征稿!
- CV与物理模型的结合,正在改变传统天气预报
- PyTorch一年增长194%,超越TensorFlow指日可待
- 初级java程序员怎样快速提升自己
- 3D游戏建模到底需要学习哪些美术基础?新手学习3D建模?
- 笔记本上的CNN搞定了MNIST
- 《Python编程从入门到实践》记录之列表切片