zoukankan      html  css  js  c++  java
  • 用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{100px}to{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;
    }
    })
  • 相关阅读:
    LeetCode:1_Two_Sum | 两个元素相加等于目标元素 | Medium
    算法导论第十章 栈队列和链表
    算法导论2-9章补充几道题
    算法导论第九章中位数和顺序统计量(选择问题)
    算法导论第八章线性时间排序
    算法导论第七章快速排序
    算法导论第六章优先队列(二)
    算法导论第六章堆排序(一)
    mysql中查看视图的元数据?
    mysql中,什么是视图,视图的作用是什么?
  • 原文地址:https://www.cnblogs.com/xunhuang/p/6869103.html
Copyright © 2011-2022 走看看