Map Icon Animation HTML CSS Tutorial

Creating map icon with CSS animation using HTML and CSS tutorial.

CSS Properties

Following are the CSS properties used:

Transform: The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.”/><style media=”print

Left: The left CSS property participates in specifying the horizontal position of a positioned element. It has no effect on non-positioned elements.”/><style media=”print

Top: The top CSS property participates in specifying the vertical position of a positioned element. It has no effect on non-positioned elements.”/><style media=”print

Border-radius: The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.”/><style media=”print

Background: The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.”/><style media=”print

-webkit-mask: The mask CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.”/><style media=”print

Content: The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.”/><style media=”print

Height: The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box, however, it instead determines the height of the border area.”/><style media=”print

Inset: The inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand.”/><style media=”print

Position: The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.”/><style media=”print

Width: The width CSS property sets an element’s width. By default, it sets the width of the content area, but if box-sizing is set to border-box, it sets the width of the border area.”/><style media=”print

Map Icon Code Block

Here is the code for implementing the Map Icon Animation.

.map-icon {
        width: 60px;
        height: 60px;
        top: 10px;
        left: 50px;
        position: relative;
        transform: rotate(45deg);
      }
      .map-icon:before,
      .map-icon:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50% 50% 0 50%;
        background: #ffb940;
        -webkit-mask: radial-gradient(circle 10px at 50% 50%, #0000 94%, #000);
      }

      .map-icon:after {
        
        transform: perspective(300px) translateZ(0px);
      }

Yay! We have created the static Map Icon Animation.

Here is the output:

Map Icon CSS Animation

pulsing animation can be implemented by scaling up and down the shape linearly.

Following are the classes used for animation.

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Here is the CSS animation class implementing CSS.

@keyframes  pulsing {
        to {
          transform: perspective(300px) translateZ(150px);
          opacity: 0;
        }
      }

The following way is to declare the CSS Class inside the class block.

 .map-icon {
        width: 60px;
        height: 60px;
        top: 10px;
        left: 50px;
        position: relative;
        transform: rotate(45deg);
      }
      .map-icon:before,
      .map-icon:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50% 50% 0 50%;
        background: #ffb940;
        -webkit-mask: radial-gradient(circle 10px at 50% 50%, #0000 94%, #000);
      }

      .map-icon:after {
        animation: pulsing 1s infinite;
        transform: perspective(300px) translateZ(0px);
      }

      @keyframes pulsing {
        to {
          transform: perspective(300px) translateZ(150px);
          opacity: 0;
        }
      }

Following is the output for Map Icon Animation animation.

Video Tutorial

You can find the complete coding tutorial in the following YouTube Short video.

Complete Code using HTML and CSS

Copy and paste the complete code in Visual studio code to view the output.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .map-icon {
        width: 60px;
        height: 60px;
        top: 10px;
        left: 50px;
        position: relative;
        transform: rotate(45deg);
      }
      .map-icon:before,
      .map-icon:after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50% 50% 0 50%;
        background: #ffb940;
        -webkit-mask: radial-gradient(circle 10px at 50% 50%, #0000 94%, #000);
      }

      .map-icon:after {
        animation: pulsing 1s infinite;
        transform: perspective(300px) translateZ(0px);
      }

      @keyframes pulsing {
        to {
          transform: perspective(300px) translateZ(150px);
          opacity: 0;
        }
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Map Icon - Salow Studios</h1>
    <div class="map-icon"></div>
  </body>
</html>

Thank you for reading this article. I hope that it helps you creating your own Map Icon Animation Animation using CSS and HTML. See you in next tutorial!