Анимация кнопки css мерцание

CSS pulse animation on hover

Create smooth looking pulse css animations for your website designs.

Apr 14, 2022 | Read time 9 minutes

🔔 Table of contents

In this post we will go over how to do pulse animation effect with CSS. Pulse animations can be used to give your interface a slick look and draw the user’s attention. They are commonly used with loading animations and sign up buttons.

What is a pulse animation?

Pulse animations can be seen in hamburger menus, sign up buttons or even thumbnails in a image gallery. These effects usually take shape of a smaller circle in the beginning of the animation and then expand as the animation progresses.

For example when the user hovers over the button, a pulse will show encouraging them to click the button. We can create pulse animation effects with CSS and with SVG images.

The key CSS property that can give us this effect is the transition:scale() function!

How to create pulse animation on hover

We create a basic circular button and and when hovered, it will give out a pulse effect. This will only require knowledge of CSS and @keyframes

The HTML is very basic, we just have one div that is the container, and a span as the button.

We can then style the button as the below. The button is circular so we need to use border-radius: 50%; . We also define the animation on hover — using the pulse keyframes and animating it for 1.5 seconds.

The @keyframes can be defined as below. The key idea is to start the animation with the button 85% of its initial size (smaller). As the animation progresses, we use the box-shadow property. This will give us a ripple effect behind our button when the user hovers. We will make the box shadow spread 50px and the colour to be blueish (#5a99d4).

As the animation finishes, we change the button back to its original size of 100% (scale(1)) and the box-shadow spread to be 0.

So the browser will fill in the keyframes, giving the impression that the button is growing slowly and its box shadow to expand — giving the pulsing animation effect.

👉 What is the CSS scale() function?

The scale() CSS function is the core of how to get this pulsating animation to work. As referenced in MDN https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale the function scales a element along the 2D plane.

We can use this with the transform CSS property. When given the scale() function just one parameter — its treated like a percentage.

So a value of 1.2 (scale(1.2)) is treated like 120%. If we pass in two values such as scale(2, 0.5) this means that we scale it 200% on the x axis and 50% on the y axis:

Pulse loading animation with CSS

In the following, we will go over another example of a pulse animation — using it for loading animations. This is great use of pulse animations since it does not require much HTML and CSS and since it is a loading animation, we need to it render quickly.

The HTML is quite simple, just one div with a class of pulseLoader.

Similar to the above example of a pulsating button on hover, to style our loading element, we need to make it circular so have to use the property border-radius: 50%; .

Keep in mind that since this div does not have any content, we have to explicitly define the width and height. I have just made it responsive and using 40vh . This just means that the div is 40% of the view height (width and height to be the same).

 Now to define the @keyframes , we just want the div to be scaled to 0% in size (not visible) in the begining of the animation and have a opacity of 0.8 (somewhat transparent).

As the animation progresses, the div will finish to be scaled to 100% of its original size and opacity of 0 (fully transparent).

This gives us the effect of a circular element growing but also disappearing as the animation progresses.

Animation performance

If performance is of a concern for your web design, then preferably we should use scale3d CSS function instead of the regular scale function. The scale3d function allows you to resize an element in 3D space and has the following signature:

sx — representing the x-component of the scaling vector.

sy — representing the y-component of the scaling vector.

sz — representing the z-component of the scaling vector.

Using scale3d we can take advantage of hardware acceleration on our animation. The processing tasks will be offloaded from the main CPU an directed to the GPU. This can lead to performance improvements when you have lots of animations already or the user’s device is not of high spec.

Additionally offloading to the GPU will see less janky animations~

Final thoughts

In this post, we went through on how to create a pulse animation on hover effect with CSS. The key techniques that is required to create this effect is the tranform:scale() function and box-shadow . Pulse animations are usually circular so we also need to style the element as a circle with the border-radius:50% CSS property.

We use @keyframes to define the animation, with the start of the animation the scale the element to be smaller and then expand to its 100% size as the animation progresses to completion. To give an effect of a pulsating ripple, we define the element’s box-shadow to also spread and contract as the animation moves through its timeline.

As with any CSS animations, we need to consider browser support and fallbacks. This effect will be supported by most modern browsers (chrome, safari, firefox, etc) with the exception of IE 11 or lower with limited support.

Additionally animation performance is a consideration — using scale3d() instead of the regular scale() CSS function for hardware acceleration (offloading tasks from the CPU to the GPU to handle).

👋 About the Author

G’day! I am Kentaro a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

👉 See Also 👈

Источник

Как создать мигающую/светящуюся кнопку с помощью анимации в CSS3

В этой статье мы покажем, как создать мигающую/светящуюся кнопку, используя только CSS. Здесь вам не нужно использовать JavaScript. Просто выполните следующие шаги и попробуйте примеры!

1. Создайте ссылку и кнопку.

Прежде всего создадим ссылку и кнопку в таком виде:

a href="#" >button">Click here!a> button type="submit" >button">Click here!button>

2. Добавьте оформление к кнопке.

Дальше необходимо указать внешний вид кнопки с помощью CSS свойств:

.button< background-color: #1c87c9; -webkit-border-radius: 60px; border-radius: 60px; border: none; color: #eeeeee; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 20px; padding: 10px 10px; text-align: center; text-decoration: none; >

3. Добавьте анимацию к кнопке:

Нам нужны ключевые кадры, чтобы добавить анимацию. Анимация содержит три ключевых кадра. Каждый из них определяет новые значения для свойств background color и the box-shadow.

@keyframes glowing < 0% < background-color: #2ba805; box-shadow: 0 0 3px #2ba805; > 50% < background-color: #49e819; box-shadow: 0 0 10px #49e819; > 100% < background-color: #2ba805; box-shadow: 0 0 3px #2ba805; > >

Ключевые кадры в оформлении анимаций:

1. 0% — начальная точка, которая указывает зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 3 px.
2. 50% — средняя точка, которая указывает светло-зеленый цвет фона и тот же цвет тени вокруг кнопки с расстоянием размытия 10 px.
3. 100% — конечная точка, которая указывается как 0%.

Давайте посмотрим результат!

Пример

html> html> head> title>Заголовок документа title> style> .button < background-color: #1c87c9; -webkit-border-radius: 60px; border-radius: 60px; border: none; color: #eeeeee; cursor: pointer; display: inline-block; font-family: sans-serif; font-size: 20px; padding: 10px 10px; text-align: center; text-decoration: none; > @keyframes glowing < 0% < background-color: #2ba805; box-shadow: 0 0 5px #2ba805; > 50% < background-color: #49e819; box-shadow: 0 0 20px #49e819; > 100% < background-color: #2ba805; box-shadow: 0 0 5px #2ba805; > > .button < animation: glowing 1300ms infinite; > style> head> body> h2>Создайте мигающую/светящуюся кнопку h2> a class="button" href="#">Нажмите сюда! a> button type="submit" class="button">Нажмите сюда! button> body> html>

Пример

html> html> head> title>Заголовок документа title> style> body < margin: 0; > .wrapper < display: flex; height: 20vh; flex-direction: row; justify-content: center; align-items: center; > .button < border: 1px transparent; -webkit-border-radius: 40px; border-radius: 40px; color: #eeeeee; cursor: pointer; display: inline-block; font-family: Arial; font-size: 20px; padding: 8px 30px; text-align: center; text-decoration: none; margin-left: 20px; -webkit-animation: glowing 1300ms infinite; -moz-animation: glowing 1300ms infinite; -o-animation: glowing 1300ms infinite; animation: glowing 1300ms infinite; > @-webkit-keyframes glowing < 0% < background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; > 50% < background-color: #21c7ed; -webkit-box-shadow: 0 0 15px #21c7ed; > 100% < background-color: #0091b2; -webkit-box-shadow: 0 0 3px #0091b2; > > @keyframes glowing < 0% < background-color: #0091b2; box-shadow: 0 0 3px #0091b2; > 50% < background-color: #21c7ed; box-shadow: 0 0 15px #21c7ed; > 100% < background-color: #0091b2; box-shadow: 0 0 3px #0091b2; > > .svg-btn < display: block; width: 230px; height: 230px; margin-left: 10px; > svg < fill: blue; -webkit-animation: glowing-polygon 1300ms infinite; -moz-animation: glowing-polygon 1300ms infinite; -o-animation: glowing-polygon 1300ms infinite; animation: glowing-polygon 1300ms infinite; > @-webkit-keyframes glowing-polygon < 0% < fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); > 50% < fill: #21c7ed; -webkit-filter: drop-shadow( 0 0 15px #21c7ed); > 100% < fill: #0091b2; -webkit-filter: drop-shadow( 0 0 3px #0091b2); > > @keyframes glowingPolygon < 0% < fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); > 50% < fill: #21c7ed; filter: drop-shadow( 0 0 15px #21c7ed); > 100% < fill: #0091b2; filter: drop-shadow( 0 0 3px #0091b2); > > style> head> body> h2>Создайте мигающую/светящуюся кнопку h2> div class="wrapper"> a class="button" href="#">Нажмите сюда! a> button type="submit" class="button">Нажмите сюда! button> a class="svg-btn"> svg height="210" width="200"> polygon points="100,10 40,198 190,78 10,78 160,198" style="fill: #0091b2;"/> svg> a> div> body> html>

Источник

Performant Pulse Animation in CSS!

Hey fellow creators You’d like to add a button with a pulse animation to your app? You can learn how to do it in CSS in less than a minute!

1. Create a button

2. Let’s style the button

body font-family: Arial, Helvetica, sans-serif; background: #333; > button position: absolute; /* centering */ top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; /* centering the content */ justify-content: center; align-items: center; width: 100px; height: 100px; border-radius: 50%; /* make it a circle */ font-size: 20px; border: none; cursor: pointer; > 

3. Create the pseudo-element.

Some are using box-shadow to achieve that stuff, me included before I knew it was bad for performance.
So I simply replaced box shadow by a pseudo-element that grows and disapears at the same time with the performant «transform» and «opacity» properties.

button::after  content: ''; display: block; position: absolute; z-index: -1; /* behind the parent */ width: 100%; height: 100%; border-radius: 50%; background: #f1f1f1; top: 0; left: 0; animation: pulse 1.4s infinite ease-out; /* animation configuration */ > 

@keyframes pulse  to  transform: scale(1.4); opacity: 0; > > 

Источник