animation同時寫多個動畫,先執行一個再執行下一個
阿新 • • 發佈:2018-11-06
animation可以同時寫多個動畫,這裡只是給出一個例子,其實可以用一個動畫就能實現了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> .test{ width: 100px; height: 100px; background-color: red; } .test:hover { animation:move2 1s ease,move1 1s ease 1s; } @keyframes move1{ from {transform: scale(1.5) translateX(0)} to {transform: scale(1.5) translateX(100px)} } @keyframes move2{ from {transform: scale(1)} to {transform: scale(1.5)} } </style> </head> <body> <div class="test">我是動畫</div> </body> </html>