<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation制作複雜幀動畫</title>
<style>
body{
background-color: rgba(163, 207, 255, 0.69);
}
a:link{
color: #ff5ee6;
h4,dt,div{
font: bold 16px "微軟雅黑";
dt{
display: inline;
float: left;
div{
width:130px;
height: 130px;
text-align: center;
line-height: 130px;
color: #fff;
cursor: pointer;
/*指定div的通用樣式屬性，*/
background: rgba(108, 112, 255, 0.85);
/*同時也有變換前的效果*/
-webkit-border-radius:24px;
-moz-border-radius:24px;
border-radius:24px;
@-webkit-keyframes bjcolor {
/*webkit核心相容模式下的幀集合 自定義名稱*/
0%{background-color: rgba(108, 112, 255, 0.85);}/*開始幀*/
25%{background-color: rgba(161, 255, 108, 0.85);}/*在整個動畫運作到40%處時*/
50%{background-color: rgba(255, 193, 98, 0.85);}
75%{background-color: rgba(255, 133, 198, 0.85);}
100%{background-color: rgba(108, 112, 255, 0.85);}/*結束幀（開始和結束幀是必須有的）(結束幀和開始偵的數值可以一樣，也可以不一樣)*/
@-moz-keyframes bjcolor {
/*moz核心相容模式下的幀集合 自定義名稱*/
@-ms-keyframes bjcolor {
/*msIE核心相容模式下的幀集合 自定義名稱*/
25%{background-color: rgba(161, 255, 108, 0.85);}/*在整個動畫運作到25%處時*/
@-o-keyframes bjcolor {
/*opera核心相容模式下的幀集合 自定義名稱*/
50%{background-color: rgba(255, 193, 98, 0.85);}/*這個花括号後面不用加分号等符号*/
.first:hover{
-webkit-animation-name: bjcolor;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;-moz-animation-name: bjcolor;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-ms-animation-name: bjcolor;
-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-o-animation-name: bjcolor;
-o-animation-duration: 4s;
-o-animation-timing-function: linear;
animation-name: bjcolor;
animation-duration: 4s;
animation-timing-function: linear;
/*animation:;看來也可以簡寫*/
/*------------------------第二個----------------------*/
@-webkit-keyframes tsform {
0%{
background-color: rgba(108, 112, 255, 0.85);
-webkit-transfrom: rotate(0deg) scale(1);
color: #ffffff;
}
25%{
background-color: rgba(161, 255, 108, 0.85);
-webkit-transform: rotate(45deg) scale(1.1);
50%{
background-color: rgba(255, 193, 98, 0.85);
-webkit-transform: rotate(0deg) scale(1);
75% {
background-color: rgba(255, 81, 87, 0.85);
-webkit-transform: rotate(-45deg) scale(1.1);
color: #b7ffd4;
100%{
color: #faff96;
@-moz-keyframes tsform {
-moz-transfrom: rotate(0deg) scale(1);
-moz-transform: rotate(45deg) scale(1.1);
-moz-transform: rotate(0deg) scale(1);
-moz-transform: rotate(-45deg) scale(1.1);
@-ms-keyframes tsform {
/*ms核心相容模式下的幀集合 自定義名稱*/
-ms-transfrom: rotate(0deg) scale(1);
-ms-transform: rotate(45deg) scale(1.1);
-ms-transform: rotate(0deg) scale(1);
-ms-transform: rotate(-45deg) scale(1.1);
@-o-keyframes tsform {
-o-transfrom: rotate(0deg) scale(1);
-o-transform: rotate(45deg) scale(1.1);
-o-transform: rotate(0deg) scale(1);
-o-transform: rotate(-45deg) scale(1.1);
.second{
margin-left: 50px;
/*如果這裡不設定：hover的話，會在一開始重新整理的時候自動播放*/
-webkit-animation-name: tsform;
-webkit-animation-duration: 1s;
-webkit-animation-timing-funtion: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: tsform;
-moz-animation-duration: 1s;
-moz-animation-timing-funtion: ease-in-out;
-moz-animation-iteration-count: infinite;
-ms-animation-name: tsform;
-ms-animation-duration: 1s;
-ms-animation-timing-funtion: ease-in-out;
-ms-animation-iteration-count: infinite;
-o-animation-name: tsform;
-o-animation-duration: 1s;
-o-animation-timing-funtion: ease-in-out;
-o-animation-iteration-count: infinite;
animation-name: tsform;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@-webkit-keyframes fadein{
opacity: 1;
background-color: #9937ff;
opacity: 0.1;
background-color: #FF33FF;
div.third:hover{ /*簡寫樣式
animation:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count*/
-webkit-animation:fadein 1s ease-in-out;
-o-animation:fadein 1s ease-in-out;
animation:fadein 1s ease-in-out;
</style>
</head>
<body>
<h1>animation案例一</h1>
<h4>animation實作一個屬性值得動畫——背景變換</h4>
<div class="first">滑鼠經過</div>
<p>總結：而他的幀集合也需要寫核心字首，就會有四個不同的：-webkit-keyfranmes；-moz-keyfranmes；-ms-keyfranmes；-o-keyfranmes.然後，hover模式中每一個帶着animation的屬性前也要加核心字首</p>
<hr/>
<h1>animation案例二</h1>
<h4>animation實作多個屬性值得動畫——transform變換+過渡速度變化+循環樣式</h4>
<div class="second">不要滑鼠，我也自動循環</div>
<p>transform在對應的核心幀集合中也需要寫對應的核心字首，
<br/>-webkit-animation-iteration-count: infinite;設定動畫循環次數
<br/>infinite表示無限循環；也可以填數值來設定具體的循環次數，</p>
<h1>animation案例三</h1>
<h4>animation實作網頁漸入效果</h4>
<div class="third">滑鼠經過</div>
<p></p>
</body>
</html>
![animate.css做點贊效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)