Как сделать анимацию?

Question

[AndRussia]

Здравствуйте, хлебцы! Проблема такая..
Я делаю сайт и мне нужно на нем запилить анимацию.

@keyframes move-ad {
from {margin-left: 1700px;}
to {margin-left: 750px;}
}
.ad:active {
    animation: move-ad 2s ease;
    animation-fill-mode: forwards;
}

Казалось бы, все нормально, что не так?
Но в итоге получилось следующее:

А нужно, чтобы при from текст был не виден.
Я попытался сделать анимацию из display: none в display: block

@keyframes hide-text {
from {display: none;}
to {display: block;}
}

Я его куда только не крепил.. И для текста с картинкой ил для .ad, ничего не помогало.
В чем может быть проблема?

Comments

[Rustam Bainazarov]

Проблема в тотальном незнании CSS-анимаций и, наверное, CSS в целом.

display — неанимируемое свойство. Про анимирование margin, хоть оно и анимируемое, я лучше промолчу.

Не понял задачи, страшно смотреть другое, но попробуйте анимировать opacity, если вам нужно визуально скрыть что-то изначально без изменения габаритов.

Ну и да… посмотрите, что за :active и при каких условиях этот псевдокласс активируется. Есть лютое сомнение, что вы его путаете с :hover.

[AndRussia]

Рустам Байназаров, На скриншоте видно, что текст сжался и пошел вниз, но нужно чтобы он просто вправо ушел.
На следующем он показан в развернутом виде. Нужно, чтобы он оставался такой же формы и просто вправо скрылся.

[Rustam Bainazarov]

AndRussia,

[Rustam Bainazarov]

Вообще, на мой взгляд, вам лучше подтянуть знания, прежде чем начинать просить за них деньги.

[Алексей Юдов]

Присоединюсь к Рустаму. Будет очень сложно найти заказчика, с учетом таких слабых знаний в css. Не из-за css в целом, а из-за уровня понимания ситуации на рынке веба. А именно, какие разработчики нужны, что они должны уметь делать, что нужно знать и понимать must have. И какое портфолио должен иметь frontender/backender/fullstacker/etc. developer.

Так что вам прямая дорогая на все возможные бесплатные курсы, тесты и ютуб туториалы.

[AndRussia]

Рустам Байназаров, я не прошу деньги. Я написал это все чисто для примера.