css 的動畫效果功能強大，但由於平時項目不常用到，現在做個簡單的動畫效果都各種查資料，著實慚愧。
好記性不如爛筆頭，我現在就把它記錄下來，也給需要的人提供便利。
我所需要的效果是 —— 下拉刷新時的旋轉圖標，旋轉一週由無到有，再繼續無限旋轉。
也就是給它綁定兩個動畫，一是 圖標旋轉，透明度由0變為1，二是圖標無限旋轉。
look
圖片圖片
下面是代碼（為了避免圖片引入，旋轉圖標用了其他代替）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<span>></span>
</div>
</body>
<style>
/*這些是基礎樣式*/
div span {
display: block;
width: 30px;
height: 30px;
line-height: 28px;
text-align: center;
margin: 10% auto;
border-radius: 50%;
font-size: 20px;
color: #ffffff;
background: #8CCC66;
}
/*下面是動畫樣式*/
div span {
animation-name:animation1, animation2; /*綁定到選擇器的動畫名稱*/
animation-duration:1s, 1s; /*完成動畫所花費的時間*/
animation-timing-function:linear, linear; /*動畫的速度曲線*/
animation-delay:0, 1s; /*動畫開始之前的延遲*/
animation-iteration-count:1, infinite; /*動畫應該播放的次數 infinite是無限循環*/
}
@-webkit-keyframes animation1 {
0%{-webkit-transform:rotate(0);opacity: 0;}
50%{-webkit-transform:rotate(180deg);opacity: .3;}
100%{-webkit-transform:rotate(360deg);opacity: 1;}
}
@keyframes animation1 {
0%{transform:rotate(0);opacity: 0;}
50%{transform:rotate(180deg);opacity: .3;}
100%{transform:rotate(360deg);opacity: 1;}
}
@-webkit-keyframes animation2 {
0%{-webkit-transform:rotate(0)}
50%{-webkit-transform:rotate(180deg)}
100%{-webkit-transform:rotate(360deg)}
}
@keyframes animation2 {
0%{transform:rotate(0)}
50%{transform:rotate(180deg)}
100%{transform:rotate(360deg)}
}
</style>
</html>