<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation-name:mymove; animation-duration:5s;/* 5s表示執行動畫的時間，0或不寫則無動畫效果 */ /* 兼容調試如果animation-name執行，那么-wekit-animation-name則不執行 */ -webkit-animation-name:mymove; -webkit-animation-duration:5s;/* 5s表示執行動畫的時間，0或不寫則無動畫效果 */ } @keyframes mymove /* 對應animation-name，里面為執行的動畫*/ { from {left:200px;}/*執行動畫的初始位置*/ to {left:0px;}/*動畫結束位置*/ 0% { opacity: 0.1; /*初始狀態 透明度為10%*/ } 50% { opacity: 0.5; /*中間狀態 透明度為50%*/ } 100% { opacity: 1; /*結尾狀態 不透明*/ } } @-webkit-keyframes mymove/* 對應-webkit-animation-name，里面為執行的動畫*/ { from {left:200px;}/*執行動畫的初始位置*/ to {left:0px;}/*動畫結束位置*/ } </style> </head> <body> <div></div> </body> </html>