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>

相關標籤/搜索