* { margin:0; padding:0; } body,html { height:100%; width:100%; overflow:hidden; } #main { }.list { margin:20px auto; width:1000px; height:600px; border:1px solid; text-align:center; } ul { list-style:none; text-align:center; display:flex; justify-content:center; align-items:center; } li { height:600px; width:250px; background:salmon; margin-left:20px; } .huadong { animation:huadong 1s,100ms; } @keyframes huadong { from { transform:translateY(-100%) scale(0); } to { transform:translateY(0%) scale(1); } }#canvas1,h2 { margin-top:100%; } button { margin-left:50%; }