Анимировать диагональную линию в css

Я хотел бы создать анимацию, которая заставляет диагональную линию увеличиваться от ширины: 0 до ширины: 400 пикселей, и она начинается слева (внизу слева) направо (вверху справа). Я знаю, как это сделать, но с горизонтальной линией (с ключевыми кадрами 0% {width: 0px;} 100% {width: 400px;}), но когда дело доходит до преобразования этой линии в диагональную линию, в начале анимации, он также меняет свое положение. Любые идеи? Спасибо!

поверните линию, чтобы получилась диагональ

— 19.09.2018 01:04

Я знаю, как повернуть линию (transform: rotate (Xdeg);), но в начале анимации она также меняет ее положение

— 19.09.2018 01:08

css animation

19.09.2018 01:03

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

2 048

Ответы 1

Вы можете попробовать это:

.line {
  height:10px;
  width:0;
  margin-top:100px;
  background:red;
  transform:rotate(-45deg);
  transform-origin:left;
  animation:grow 1s linear forwards;
}
@keyframes grow{
  to {width:100px;}
}