Анимация для перевода стрелки вправо
Я бы хотел оживить «стрелку вправо» с переводом слева направо. Или, поскольку моя стрелка создается с использованием свойств "преобразования", моя анимация применяется к обоим преобразованиям (поворот и перевод) ...
В моем примере ниже стрелка переводится И поворачивается анимацией. Я бы хотел, чтобы это было только переведено. Как я мог это сделать?
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: transform 400ms ease !important;
}
.link-page-1 p {
cursor:pointer;
}
.link-page-1:hover p {
color: #727272 !important;
}
.link-page-1:hover .right {
transform: rotate(-45deg);
transform: translate(10px,0px);
}<p class = "link-page-1" style = "font-size:20px; color:black;">En savoir plus <i class = "arrow right"></i></p>Спасибо за вашу помощь !
Приемы 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 сценарий полностью изменился.
0
1
249
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Ответ принят как подходящий
Прямо сейчас у вас есть несколько transforms, что приводит к срабатыванию только последнего (translate), а также по умолчанию rotate возвращается к 0. Что вам нужно сделать, так это объединить rotate и translate в один transform:
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: transform 400ms ease !important;
}
.link-page-1 p {
cursor:pointer;
}
.link-page-1:hover p {
color: #727272 !important;
}
.link-page-1:hover .right {
transform:rotate(-45deg) translate(10px,0px);
-webkit-transform:rotate(-45deg) translate(10px,0px);
}<p class = "link-page-1" style = "font-size:20px; color:black;">En savoir plus <i class = "arrow right"></i></p>Спасибо за быстрый ответ :)
—
07.08.2018 18:55
Совершенно никаких проблем
—
07.08.2018 19:27
Пожалуйста, обратитесь к следующему коду. Вам необходимо объединить как translate, так и rotate со свойствами, разделенными пробелами. Надеюсь, это то, что вы ищете.
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transition: transform 400ms ease !important;
}
.link-page-1 p {
cursor:pointer;
}
.link-page-1:hover p {
color: #727272 !important;
}
.link-page-1:hover .right {
transform: translate(10px) rotate(-45deg);
}<p class = "link-page-1" style = "font-size:20px; color:black;">En savoir plus <i class = "arrow right"></i></p>Другие вопросы по теме
CSS-анимация круговой ряби
Safari не останавливает анимацию CSS3
IsSupported 'неопределенного jquery
CSS переход ширины границы
SVG-анимация толстой пунктирной закругленной затененной линии на произвольном фоне
Я не могу понять, как остановить привязку, когда пользователь наведен на фон моего сайта
Как установить время анимации абзаца в зависимости от длины текста в абзаце?
Сделайте слайд div вверх, подождите 5 секунд и спуститесь с помощью CSS-анимации
CSS - Заставить указатель мыши исчезнуть через несколько секунд
Читать спрайт css всегда в полноэкранном режиме?
Похожие вопросы
Фиксированный нижний колонтитул только через CSS
Вращающееся изображение не сглаживает анимацию
Использование процентных значений с background-position на linear-gradient
Пользовательская ошибка перехода карусели jQuery
Половина шрифта потрясающий рейтинг сердца css
Как выровнять псевдоэлементы по вертикали?
Проблема с кнопкой высоты строки на Android?
TextInput в React Native показывает текстовое значение с цветным фоном
Flex - фиксированное положение детей и рост 100%
Переполнение: прокрутка в div, содержащем динамический ul
Объясните, пожалуйста, довольно непонятный вопрос ...