animation 動畫
阿新 • • 發佈:2020-09-07
動畫常用屬性參照https://www.w3school.com.cn/css3/css3_animation.asp
1.平移、旋轉、縮放
@keyframes move { 0% { transform: rotate(0deg); } 25% { transform: translate(440px, 0px); } 50% { transform: rotate(288deg); } 70% { transform:rotate(-299deg); } 100% { transform: scale(.5) } } .first { width: 100px; height: 100px; background: red; /* 定義動畫名稱 */ animation-name: move; /* 動畫播放時間 */ animation-duration: 3s; animation-iteration-count: infinite; } <div class="first"> 平移 </div>
2.水波紋
.wave { margin: 20px auto; width: 100px; height: 100px; background: lightcyan; position: relative; } .wave .point { position: absolute; width: 4px; height: 4px; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); background: red; } .wave div[class^='circle'] { position: absolute; width: 8px; height: 8px; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation-name: wave; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: linear; } /* 設定動畫延遲 */ .wave .circle2 { animation-delay: 0.4s; } .wave .circle3 { animation-delay: 0.8s; } @keyframes wave { 0% {} 30% { width: 30px; height: 30px; opacity: 1; } 60% { width: 50px; height: 50px; opacity: .7; } 100% { width: 75px; height: 75px; opacity: 0.1; } } <div class="wave"> <div class="point"></div> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> </div>
3.移動+縮放
.three { width: 100px; height: 100px; background: blue; /* margin: 20px auto; */ position: relative; animation: scaleThree 2s linear infinite, moveThree 2s linear infinite; } @keyframes moveThree { 0% { } 100% { transform: translate(440px, 0px); } } @keyframes scaleThree { 0% { } 100% { transform: scale(2); } } <div class="three"> 移動+縮放 </div>