Create a simple Animated Map Marker with CSS3

Create a simple Animated Map Marker with CSS3 Tutorial
In this Tutorial we will learn how to create a simple animated map marker using CSS3 key frames to animate a border/object size for a pulsating effect. 


<!DOCTYPE html>
<html>
<head>
<style>
 .marker {
    margin-top: 20px;
                   margin-left: 30px;
                   position: relative;
          }

          .pulse {
                   width: 10px;
                   height: 10px;
                   border: 5px solid #FF0000;

                   -webkit-border-radius: 50px;
                   -moz-border-radius: 50px;
                   border-radius: 50px;
                   background-color: #FFFF00;
                   z-index: -4;
                   position: absolute;
          }

          .dot {
                   position: absolute;
                    height: 50px;
                   width: 50px;
                   top: -25px;
                   left: -25px;
                   z-index: 2;
                   opacity: 0;
                   border: 10px solid rgba(255, 0, 0, 1);;
                   background: transparent;
                   -webkit-border-radius: 60px;
                   -moz-border-radius: 60px;
                   border-radius: 60px;
                   -webkit-animation: flash 2s ease-out;
                   -moz-animation: flash 2s ease-out;
                   animation: flash 2s ease-out;
                    -webkit-animation-iteration-count: infinite;
                   -moz-animation-iteration-count: infinite;
                   animation-iteration-count: infinite;
          }

  @-moz-keyframes pulse {
           0% {-moz-transform: scale(0);opacity: 0.0;}
           25% {-moz-transform: scale(0);opacity: 0.1;}
           50% {-moz-transform: scale(0.1);opacity: 0.3;}
           75% {-moz-transform: scale(0.5);opacity: 0.5;}
           100% {-moz-transform: scale(1);opacity: 0.0;}
  }

  @-webkit-keyframes "flash" {
           0% {-webkit-transform: scale(0);opacity: 0.0;}
           25% {-webkit-transform: scale(0);opacity: 0.1;}
           50% {-webkit-transform: scale(0.1);opacity: 0.3;}
           75% {-webkit-transform: scale(0.5);opacity: 0.5;}
           100% {-webkit-transform: scale(1);opacity: 0.0;}
          }
</style>
</head>
<body>

<div class="marker">
  <div class="dot"></div>
  <div class="pulse"></div>
</div>

</body>

</html>
































If you need some Help for the code above here are some code descriptions

·        Position Property definition
The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).

Default value: Static
Inherited: no
The position property is supported in all major browsers.

·        Border-radius Property definition
The border-radius property is a shorthand property for setting the four border-*-radius properties. This property allows you to add rounded borders to elements!

Default value: 0
Inherited: no
The border-radius property is supported in Chrome, Firefox 4+, IE9+, Safari 5+, and Opera.

·        Opacity Property definition
The opacity property sets the opacity level for an element.
Default value: 1
Inherited: no

Syntax: opacity: value|inherit;

·        Animation
We can create animations, which can replace animated images, Flash animations, and JavaScripts in many web pages. An animation is an effect that lets an element gradually change from one style to another.
You can change as many styles you want, as many times you want.

Note: You must define the name and the duration of the animation. If duration is omitted, the animation will not run, because the default value is 0.

animation-iteration-count - Specifies the number of times an animation is played. Default 1

·        @keyframes Rule
To create animations in CSS3, you will have to learn about the @keyframes rule. The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
Create a simple Animated Map Marker with CSS3 Tutorial

If you need any help feel free to leave a comment (or) contact me.


Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)