我发现了一种不仅从左到右/从右到左动画的方法，而且还从居中的文本动画。
诀窍是将宽度设置为“ 0”。
ul { background: #fff; padding: 16px; border: 1px solid #e2e2e2;}li { list-style: none; letter-spacing: 1px; font: 12px 'Tahoma'; line-height: 24px; color: #444; text-align: center; white-space: nowrap; width: 100%; transition: width .8s ease;}ul:hover > li { width: 0;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>document</title></head><body><ul> <li>this</li> <li>is a list</li> <li>of entries</li> <li>with various widths.</li> <li>hover over it</li> <li>to apply crazy css magic!</li></ul></body></html>
