Can you explain the mechanics behind the animation of the upvote button on steemit.com?

Behold the upvote button of steemit.com:

<span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;">
  <svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="Chevron_Up_Circle"><circle cx="16" cy="16" r="15" stroke="#121313" fill="none"></circle>
         <path d="M16.699,11.293c-0.384-0.38-1.044-0.381-1.429,0l-6.999,6.899c-0.394,0.391-0.394,1.024,0,1.414 c0.395,0.391,1.034,0.391,1.429,0l6.285-6.195l6.285,6.196c0.394,0.391,1.034,0.391,1.429,0c0.394-0.391,0.394-1.024,0-1.414 L16.699,11.293z" fill="#121313"></path>
     </g>
  </svg>
</span>

I'm curious about how the mouseover animation functions on this button. It seems like there is no change in the code above when hovering over it with my mouse.

javascripthtmlcssanimationsvg

Answer №1

There is an interesting animation effect being applied to the span element when hovering over it. Check out the live demo on Fiddle.

a.Voting__button-up, path, circle {
    transition: opacity, fill, stroke .3s ease 0s;
}
a.Voting__button-up:hover circle{
    fill: #06D6A9;
    stroke: #06D6A9;
}
.Voting__button-up .Icon:hover {
    box-shadow: 0 0 0 #4ba2f2;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}
.Voting__button-up .Icon {
    margin-left: 0;
    border-radius: 50%;
}
.Voting__button .Icon {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
@keyframes pulse{
  0% {
      box-shadow: 0 0 0 0 #06d6a9;
  }
  70% {
      box-shadow: 0 0 0 10px rgba(6, 214, 169, 0);
  }
  100% {
      box-shadow: 0 0 0 0 rgba(6, 214, 169, 0);
  }
}
<a href="" class="Voting__button-up">
<span class="Icon chevron-up-circle" style="display: inline-block; width: 1.12rem; height: 1.12rem;">
  <svg enable-background="new 0 0 33 33" version="1.1" viewBox="0 0 33 33" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <g id="Chevron_Up_Circle"><circle cx="16" cy="16" r="15" stroke="#121313" fill="none"></circle>
         <path d="M16.699,11.293c-0.384-0.38-1.044-0.381-1.429,0l-6.999,6.899c-0.394,0.391-0.394,1.024,0,1.414 c0.395,0.391,1.034,0.391,1.429,0l6.285-6.195l6.285,6.196c0.394,0.391,1.034,0.391,1.429,0c0.394-0.391,0.394-1.024,0-1.414 L16.699,11.293z" fill="#121313"></path>
     </g>
  </svg>
</span>
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidelines for simultaneously modifying two dropdown select options

Is it possible to have one dropdown automatically change its value based on the selection made in another dropdown? For instance, if 'Value 1' is chosen from 'dropdown 1', can we set 'dropdown 2' to automatically display the ...

javascriptjqueryhtmlformsdrop-down-menu

Using the val() function on a select element can occasionally result in a null value

Having an issue with my select. For some reason, when I use $(".test").val(), it sporadically returns null. Can't seem to figure out what's causing this inconsistency. console.log($('.test').val()); <script src="https://ajax.googl ...

javascriptjqueryhtmlselect

Position text input boxes on the right side of the div element

I am seeking help with aligning the text inputs to the edge of .formColumn2 so they appear in a neat line together. I have attempted using margin-right:0 and margin-left, but these solutions end up extending the .formColumn2 div which is not my desired out ...

htmlcssformstextinput

Ensure to update the canvas prior to the function finishing

Is there a way to update the canvas element while inside a JavaScript function without waiting for the function to return? It can be frustrating when you want to keep the function running but also need to update the canvas element in real time. ...

javascripthtml5-canvas

Create a form in a React component that allows the user to input information

My challenge is to create a functionality where each time the add button is clicked, it should dynamically add an input field that I can save. It's similar to this example, but with inputs instead. The complexity arises from the fact that the inputs a ...

javascriptreactjsinputaddition

What are the steps to ensure that data retrieved from an API is accurately displayed in a table?

My current goal is to collect data from the crypto compare API and display it in a table format. Although I am able to generate the necessary elements and append them to the table body, I am facing an unusual issue. Each time I use a for loop to iterate th ...

javascriptjqueryhtmlcss

Trying to decide between using a Javascript or HTML5 PDF Editor?

I am in need of a solution that enables users to edit PDF files directly on an ASP.NET web page. This functionality is intended for creating templates and adding blocks/form fields to existing PDFs, complete with rulers and other necessary features. Desp ...

javascriptasp.nethtmlpdf-generation

Utilizing JavaScript to showcase information retrieved from the database

After implementing this code example for a cascaded drop-down menu, I would like to incorporate the names of individuals residing in a specific city. How can I achieve this functionality once a city is selected? Demo link: Complete code snippet below: ...

javascriptphpjquerymysql

When evaluating objects or arrays of objects to determine modifications

How can we detect changes in table data when users add input to cells? For example, if a user clicks on a cell and adds an input, the function should return TRUE to indicate that there are changes. If the user just clicks on the cell without making any ch ...

javascriptarraysangulartypescriptobject

The issue of a background image not appearing on Chrome and Firefox has been identified

I am experiencing an issue where a background image is not showing up on Chrome or Firefox, but it displays properly on other browsers. The problem occurs with relative and hard links Substituting the image file works, but the video disappears Adblock is ...

htmlcss

Obtain unique identifiers for the purpose of sorting the items

While utilizing Nuxt.js, I am fetching random images from URLs structured like this: http://www.randomimage.com?ID=myId To display 2 pictures, I use the following methods: getRandomArbitrary(min, max) { return this.numb = Math.floor(Math.random() * ...

javascriptvue.js

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

After creating a custom marker for leaflet maps, I noticed that it shifts position drastically when zooming in and out of the map. Despite trying to adjust anchor points and positions, the issue persists. I have provided the code below in hopes that someon ...

javascripthtmlcssleaflet

Using the for-each loop in Express.js with Node

I'm currently working on developing a REST API using express with Node. I have a requirement to iterate through a for loop in order to generate the desired JSON output. Here is a snippet of my route file: var Redis = require('ioredis') var ...

javascriptjsonnode.jsexpressasynchronous

An error was encountered: The object 'object object' does not have the 'on' method available

I want to experiment with this website: However, I am encountering an error without any events triggering. I am confused why the method "on" is not being found even on page load. <head> <link href="css/scrollable-horizontal.css" rel="styleshe ...

javascriptjquerygoogle-chromescrollable

Understanding the process of extracting HTML tags from an RSS feed using Python

I am looking for a way to create a plain text readout of an RSS feed using a small utility. Below is the code I have: #!/usr/bin/python # /usr/lib/xscreensaver/phosphor -scale 3 -program 'python newsfeed.py | tee /dev/stderr | festival --tts' ...

pythonhtmlparsingrss

Django CSS graphical interface for selecting styles

I am looking to implement a feature that allows users to select an "interface theme": To enable users to change the theme across all templates, I have created a dropdown in my base.html. For all my HTML templates, I utilize a base.html file by extending ...

cssajaxdjangodjango-templates

Navigating the complexities of integrating Rollup, ES modules, TypeScript, and JSX can be a challenging endeavor due to

Lately, I've been learning about the tools mentioned in the title. However, I've encountered some bumps along the way, so I'm turning to StackOverflow for help. My Requirements I need something like Rollup to pack my stuff For bare module ...

javascriptnode.jsreactjstypescriptrollupjs

Encountered an issue with the ProgressPlugin: TypeError - Unable to access property 'tap' of an undefined element

Encountering a Problem with npm run build Here's the issue at hand Compiling client E:\ui\sheraspace_ui\node_modules\webpack\lib\ProgressPlugin.js:223 compilation.hooks.addEntry.tap("ProgressPlugin", entryAdd ...

javascriptreactjswebpacknext.js

Getting elements to vertically align in the center and have matching heights using Bootstrap

Does anyone have experience with vertical aligning in Bootstrap using flex box classes like align-items-center? I'm struggling to vertically center the text content in the boxes of the codepen provided below while ensuring each box matches the height ...

csstwitter-bootstrapbootstrap-4

Creating a JavaScript regular expression for formatting time input without using any external plugin

As I work on implementing a time input mask with the meridian of am|pm without using an input mask plugin, I've encountered some challenges. The input should not allow the user to start with alphabets, but my current pattern, although it works, clears ...

javascriptjqueryregexinput-mask