Плавная анимация увеличения?
Сочиняю вот такую кнопку.
Немогу сделать плавное уменьшение/увеличение scale
помогите пж
Я хочу чтобы иконка плавно уеличивалась при наведении и "дрожала", ну и плавно уменьшалоь обратно
<ul class="social-icons-1"> <li><ab>Phone</ab> <a href="#" class="a-phone" > <i class="fa fa-phone phone"></i> </a> </li> </ul> <style> ab { background: #eeeeee; padding: 7px 17px; font-size: 11px; position: absolute; top: 12px; left: -80px; border-radius: 7px; } .social-icons-1 { padding: 0; list-style: none; margin: 10px; } .social-icons-1 li { display: block; position: relative; font-size: 24px; margin: 0.1em; line-height: 1; } .social-icons-1 i, .social-icons-1 img { color: #fff; position: absolute; top: 11px; left: 11px; width: 24px; height: 24px; text-align:center; transition: all 0.3s ease-out; } .social-icons-1 a { display: inline-block; } .social-icons-1 a:before { transform: scale(1); content: ""; width: 45px; height: 45px; border-radius: 100%; display: block; background: linear-gradient(45deg, #337AB7, #2d6b9f); box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s ease-out; } .social-icons-1 a:hover:before { transform: scale(0); transition: all 0.3s ease-in; } .social-icons-1 a:hover i { transform: rotate(15deg) scale(1.8); color: #337AB7; transition: all 0.3s ease-in; } </style> /********************************************************/ <style> .social-icons-1 .a-phone:before { background: linear-gradient(45deg,#55A0FF, #55A0FF); } .social-icons-1 a:hover .phone { color: #55A0FF; } .social-icons-1 a:hover .phone { -webkit-animation: 1.2s ease-in-out 0s normal none infinite running phone-anima; -moz-animation: 1.2s ease-in-out 0s normal none infinite running phone-anima; -o-animation: 1.2s ease-in-out 0s normal none infinite running phone-anima; animation: 1.2s ease-in-out 0s normal none infinite running phone-anima; } @keyframes phone-anima { 0%, 50%, 100% { transform: rotate(0deg) scale(1.8); -webkit-transform: rotate(0deg) scale(1.8); -moz-transform: rotate(0deg) scale(1.8); -o-transform: rotate(0deg) scale(1.8); -ms-transform: rotate(0deg) scale(1.8); } 10%, 30% { transform: rotate(-10deg) scale(1.8); -webkit-transform: rotate(-10deg) scale(1.8); -moz-transform: rotate(-10deg) scale(1.8); -o-transform: rotate(-10deg) scale(1.8); -ms-transform: rotate(-10deg) scale(1.8); } 20%, 40% { transform: rotate(10deg) scale(1.8); -webkit-transform: rotate(10deg) scale(1.8); -moz-transform: rotate(10deg) scale(1.8); -o-transform: rotate(10deg) scale(1.8); -ms-transform: rotate(10deg) scale(1.8); } } </style> |
<ul class="social-icons-1"> <li><ab>Phone</ab> <a href="#" class="a-phone" > <i class="fa fa-phone phone"></i> </a> </li> </ul> <style> ab { background: #eeeeee; padding: 7px 17px; font-size: 11px; position: absolute; top: 12px; left: -80px; border-radius: 7px; } .social-icons-1 { padding: 0; list-style: none; margin: 10px; } .social-icons-1 li { display: block; position: relative; font-size: 24px; margin: 0.1em; line-height: 1; } .social-icons-1 i, .social-icons-1 img { color: #fff; position: absolute; top: 11px; left: 11px; width: 24px; height: 24px; text-align:center; transition: all 0.3s ease-out; } .social-icons-1 a { display: inline-block; } .social-icons-1 a:before { transform: scale(1); content: ""; width: 45px; height: 45px; border-radius: 100%; display: block; background: linear-gradient(45deg, #337AB7, #2d6b9f); box-shadow: 0 2px 5px rgba(0,0,0,0.2), 0 2px 4px rgba(0,0,0,0.2); transition: all 0.3s ease-out; } .social-icons-1 a:hover:before { transform: scale(0); transition: all 0.3s ease-in; } .social-icons-1 a:hover i { transform: rotate(15deg) scale(1.8); color: #337AB7; transition: all 0.3s ease-in; } </style> /********************************************************/ <style> .social-icons-1 .a-phone:before { background: linear-gradient(45deg,#55A0FF, #55A0FF); } .social-icons-1 a:hover .phone { color: #55A0FF; } .social-icons-1 a:hover .phone { -webkit-animation: 1.2s ease-in-out 0s normal none infinite running phone-anima; -moz-animation: 1.2s ease-in-out 0s normal none infinite running phone-anima; -o-animation: 1.2s ease-in-out 0s normal none infinite running phone-anima; animation: 1.2s ease-in-out 0s normal none infinite running phone-anima; } @keyframes phone-anima { 0%, 50%, 100% { transform: rotate(0deg) scale(1.8); -webkit-transform: rotate(0deg) scale(1.8); -moz-transform: rotate(0deg) scale(1.8); -o-transform: rotate(0deg) scale(1.8); -ms-transform: rotate(0deg) scale(1.8); } 10%, 30% { transform: rotate(-10deg) scale(1.8); -webkit-transform: rotate(-10deg) scale(1.8); -moz-transform: rotate(-10deg) scale(1.8); -o-transform: rotate(-10deg) scale(1.8); -ms-transform: rotate(-10deg) scale(1.8); } 20%, 40% { transform: rotate(10deg) scale(1.8); -webkit-transform: rotate(10deg) scale(1.8); -moz-transform: rotate(10deg) scale(1.8); -o-transform: rotate(10deg) scale(1.8); -ms-transform: rotate(10deg) scale(1.8); } } </style>
Дополнительно:
Если закинуть в codepen и вложить в вопрос будет продуктивнее
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания плавной анимации увеличения элемента на веб-странице можно использовать CSS свойства transition и transform.
Прежде всего, необходимо определить элемент, который будет увеличиваться с анимацией. Для примера, предположим, что у нас есть кнопка, которая должна увеличиваться при наведении курсора.
Ниже приведен пример кода на CSS для создания плавной анимации увеличения кнопки:
.button { background-color: #3498db; color: white; padding: 10px 20px; border: none; cursor: pointer; transition: transform 0.3s; } .button:hover { transform: scale(1.1); }
В данном примере мы задаем стили для кнопки (цвет фона, цвет текста, отступы и т.д.) и добавляем transition для свойства transform. При наведении курсора на кнопку, она будет увеличиваться в 1.1 раза за 0.3 секунды, что создаст плавный эффект увеличения.
Таким образом, используя CSS свойства transition и transform, можно легко создать плавную анимацию увеличения элемента на веб-странице. Не забудьте также поддерживать совместимость с различными браузерами при использовании анимации.