CSS3動畫以及animation事件

最後更新：2017-08-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：播放 blog 結束一個等於 css3動畫 microsoft 名稱 soft

1、CSS3動畫以及animation事件的定義 animation :name duration timing-function delay iteration-count directionanimation-name:動畫名稱　　　　animation-name：keyframename|none(keyframename:自訂名字 none:動畫無效果)animation-duration:動畫執行時間 animation-duration:time(time:秒/毫秒)animation-timing-function:動畫速度曲線【animation-timing-function：value;linnear:規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）ease:規定以慢速開始的過渡效果（等於 cubic-bezier(0.25,0.1,0.25,1)）ease-in:規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）ease-out:規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）ease-in-out:規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）cubic-bezier(n,n,n,n):在cubic-bezier函數中定義自己的值，可能的數值在0~1之間steps(n):階躍函數】animation-delay:動畫效果延遲時間　　animation-delay:time(time:秒/毫秒)animation-iteration-count:動畫執行次數　　animation-iteration-count:n|infinite（n:具體次數、infinite：無限重複）animation-direction:動畫執行方向　　　animation-direction：normal|alternate(normal:動畫順序播放、alternate:動畫輪流反向播放)animation-play-state:動畫執行狀態　　animation-play-state:pause | running(paused:暫停動畫、running:運行動畫)animation-fill-mode:動畫執行過程效果是否可見　

【

animation-fill-mode:none | forwards | backwards | both (none:不改變[預設值]、forwards：當動畫完成後，保持最後一個屬性值[在最後一個主要畫面格中定義]) 、backwords:在animation所指定的一段時間內，在動畫顯示前，應運開始屬性值（在第一個主要畫面格中定義）、both:向前後相後填充模式都被應用

】

@keyframes:規定動畫 @keyframes animationname {keyframes-selector{css-styles;}}

【

keyframes-selector :動畫時間長度百分比0~100%from(與0%相同)to(與100%相同)可以只有一個tocss-styles:一個或者多個合法的css樣式屬性

】

動畫事件：動畫開始：obj.addEventListener("webkitAnimationStart",fn);//Chrome瀏覽器安全色模式　　　　　obj.addEventListener("animationstart",fn);//其他相容瀏覽器動畫執行過程中觸發：　　　　　obj.addEventListener("webkitAnimationIteration",fn);　　　　　obj.addEventListener("animationIteration",fn);動畫結束後觸發：　　　　　obj.addEventListener("webkitAnimationEnd",fn);　　　　　obj.addEventListener("animationEnd",fn);2、CSS3動畫以及animation事件應用範例程式碼<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation事件</title>
<style>
*{
margin:0;
padding: 0;
}
div{
width: 100px;
height: 300px;
background: #666;
animation: anim 2s 1s linear 3 alternate forwards ;/*第一個time是動畫改變的1時間，第二個是開始之前的延時*/
}
@keyframes anim {
0%{width: 50px;}
100%{width: 300px;}
}
</style>
</head>
<body>
<div id="div"></div>
<script>
var oDiv = document.getElementById("div");
oDiv.addEventListener("webkitAnimationStart",start);
oDiv.addEventListener("animationStart",start);
oDiv.addEventListener("webkitAnimationIteration",iteration);
oDiv.addEventListener("animationIteration",iteration);
oDiv.addEventListener("webkitAnimationEnd",end);
oDiv.addEventListener("animationEnd",end);
function start() {
oDiv.style.background = "red";
}
function iteration() {
oDiv.style.background = "green";
}
function end() {
oDiv.style.background = "blue";
}
</script>
</body>
</html>3、樣本

樣本源碼：animation事件.zip轉載請註明出處，謝謝您的合作！

CSS3動畫以及animation事件

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More