#css #css-animations
Вопрос:
Моя анимация круга выглядит растянутой? Как я могу сделать так, чтобы круг не выглядел вытянутым по оси x? Он растягивается во время анимации, а затем возвращается в нормальное состояние после завершения анимации.
p { animation-duration: 3s; animation-name: slidein; } .ball { border-radius: 50%; background: blue; height: 50px; width: 50px; display: inline-block; animation-duration: 3s; animation-name: slidein; } .animation-container { overflow: hidden; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } lt;div class="animation-container"gt; lt;pgt;hello worldlt;/pgt; lt;/divgt; lt;div class="animation-container"gt; lt;div class="ball"gt;lt;/divgt; lt;/divgt; Комментарии:
1. Вы анимируете ширину, чего еще вы ожидаете? Может быть, попробуйте также анимировать высоту.
2. хорошо, я был сбит с толку, потому что в учебнике, которому я следовал, была указана ширина элемента абзаца, хотя я не совсем уверен, почему. Его удаление устранило мою проблему.
Ответ №1:
Ну, вы анимируете свой width от 300% до 100%. Удаление этого исправит ситуацию.
p { animation-duration: 3s; animation-name: slidein; } .ball { border-radius: 50%; background: blue; height: 50px; width: 50px; display: inline-block; animation-duration: 3s; animation-name: slidein; } .animation-container { overflow: hidden; } @keyframes slidein { from { margin-left: 100%; } to { margin-left: 0%; } } lt;div class="animation-container"gt; lt;pgt;hello worldlt;/pgt; lt;/divgt; lt;div class="animation-container"gt; lt;div class="ball"gt;lt;/divgt; lt;/divgt;