<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>會旋轉</title>
</head>
<style media="screen">
.demo{
width: 100px;
height: 100px;
background: rgb(135, 219, 18);
/*聲明動畫：名字，持續時間，循環次數，播放方式，播放之前或之後的變化是否呈現（是否恢復動畫之前的狀態）*/
animation-name: ani1;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier();
animation-fill-mode: forwards;
}
/*定義動畫*/
@keyframes ani1 {
/*開始狀態*/
0%{
transform: translateX(0) rotate(0);
}
/*結束狀態*/
100%{
transform: translateX(900px) rotate(720deg);
}
}
</style>
<body>
<div class="box">
<div class="demo"></div>
</div>
</body>
</html>
旋轉的方塊
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章