1.CSS動畫
1.1 CSS動畫屬性-animation
animation：爲CSS動畫屬性，使用該屬性可以替代flash等動畫效果，使其可以完成關鍵幀補充等效果。其需要和@keyframes配合使用，以滿足動畫效果。其餘內容可參見：W3C-CSS動畫講解
<!-- 示例代碼二 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3D Learn</title>
</head>
<body>
<div class="div1" onclick="paused()">
css3 動畫
</div>
<style>
body {
width: 99%;
height: 100%;
}
.div1 {
margin-top: 25%;
border-radius: 7px;
width: 80px;
height: 50px;
/* 使div文字居中的方法之一 */
line-height: 50px;
text-align: center;
/* 若想使div移動，則需要設置定位爲相對位置 */
position: relative;
/* 簡寫方式 */
/* animation: test 15s infinite running;
-webkit-animation: test 15s infinite running; */
animation-name: test;
-webkit-animation-name: test;
/* duration 後面需要加單位s */
-webkit-animation-duration: 15s;
animation-duration: 15s;
animation-iteration-count: infinite;
animation-play-state: paused;
animation-timing-function: linear;
-webkit-animation-play-state: paused;
background-color: aqua;
}
@keyframes test {
0% {
left: 0px;
}
15% {
margin-top: 0px;
left: 300px;
/* transform: rotate(30deg); */
}
50% {
margin-top: 25%;
left: calc(100% - 85px);
/* transform: rotate(30deg); */
background-color: greenyellow;
}
65% {
margin-top: 50%;
left: calc(100% - 370px);
/* transform: rotate(360deg); */
background-color: bisque;
}
100% {
margin-top: 25%;
left: 0px;
}
}
</style>
<script>
function paused() {
document.getElementsByClassName("div1")[0].style.animationPlayState = "running";
}
</script>
</body>
</html>