CSS only slideshow does not show pictures - html

I've found a pure CSS banner slider that is works good in code pen. I've copied the code of HTML and CSS into one page but it does not work. All of the images are external and they available. It has no any Js or etc just html and css. You may see it perfectly works here CSS only slideshow Help me please.
<head>
</head>
<style>
.wrapper {
position: relative;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.slideshow {
position: absolute;
top: 0;
left: 50%;
width: 100%;
height: 100%;
transform: translateX(-50%);
&--hero {
z-index: 3;
left: 0;
top: 50%;
// width: 100%;
height: 85%;
transform: translateY(-50%) skewY(-10deg);
transform-origin: center;
overflow: hidden;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.25);
.slides {
position: absolute;
left: 0;
top: -10%;
width: 100vw;
height: 100vh;
animation: 11s slideshow-hero-mobile -3s infinite;
}
.slide1 {
background-image: url(2.jpg);
animation: 20s slides-set-1 -0.1s infinite;
}
.slide2 {
background-image: url(3.jpg);
animation: 20s slides-set-2 -0.1s infinite;
}
.slide3 {
background-image: url(4.jpg);
animation: 20s slides-set-3 -0.1s infinite;
}
#media (min-width: 600px) {
left: 50%;
top: 0;
width: 67%;
height: 100%;
transform: translateX(-50%) skewX(-10deg);
.slides {
top: 0;
left: -25%;
height: 100%;
animation: 11s slideshow-hero -3s infinite;
}
}
}
&--contrast {
z-index: 1;
width: 100%;
height: 50%;
transform: none;
.slide {
filter: blur(3px);
}
&--before {
left: 0;
.slides {
width: 100vw;
}
}
&--after {
z-index: 2;
left: auto;
right: 0;
.slides {
width: 100vw;
left: auto;
right: 0;
}
}
.slides {
animation: 14s slideshow-contrast -5s infinite;
}
.slide1 {
background-image: linear-gradient(to bottom, rgba(200,200,75,0.25) 0, rgba(200,75,80,0.5) 100%), url(https://source.unsplash.com/1000x750);
// background-image: url(../img/slideshow/hero-1.jpg);
animation: 20s slides-set-1 -0.2s infinite;
}
.slide2 {
background-image: linear-gradient(to bottom, rgba(200,200,75,0.25) 0, rgba(50,50,50,0.5) 100%), url(https://source.unsplash.com/1001x751);
// background-image: url(../img/slideshow/hero-2.jpg);
animation: 20s slides-set-2 -0.2s infinite;
}
.slide3 {
background-image: linear-gradient(to bottom, rgba(100,100,75,0.25) 0, rgba(50,50,50,0.5) 100%), url(https://source.unsplash.com/1002x752);
// background-image: url(../img/slideshow/hero-3.jpg);
animation: 20s slides-set-3 -0.2s infinite;
}
&--after {
top: auto;
bottom: 0;
.slides {
animation: 13s slideshow-contrast -13s infinite;
}
.slide {
background-position: right;
}
.slide1 {
animation: 20s slides-set-1 infinite;
}
.slide2 {
animation: 20s slides-set-2 infinite;
}
.slide3 {
animation: 20s slides-set-3 infinite;
}
}
#media (min-width: 600px) {
width: 50%;
height: 100%;
&--after {
top: 0;
bottom: auto;
.slides {
width: 50vw;
}
}
}
}
}
.slides,
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
#keyframes slideshow-hero-mobile {
0% {
transform: scale(1) skewY(10deg);
}
50% {
transform: scale(1.05) skewY(10deg);
}
100% {
transform: scale(1) skewY(10deg);
}
}
#keyframes slideshow-hero {
0% {
transform: scale(1) skewX(10deg);
}
50% {
transform: scale(1.05) skewX(10deg);
}
100% {
transform: scale(1) skewX(10deg);
}
}
#keyframes slideshow-contrast {
0% {
transform: scale(1.05);
}
50% {
transform: scale(1);
}
100% {
transform: scale(1.05);
}
}
#keyframes slides-set-1 {
0% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
31% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
34% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
97% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
100% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
}
#keyframes slides-set-2 {
0% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
31% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
34% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
64% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
67% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
100% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
}
#keyframes slides-set-3 {
0% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
64% {
opacity: 0;
// transform: translateY(-100px);
transform: scale(1.05);
}
67% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
97% {
opacity: 1;
// transform: translateY(0);
transform: scale(1);
}
100% {
opacity: 0;
// transform: translateY(100px);
transform: scale(1.05);
}
}
</style>
<html>
<body>
asdasd
<div class="wrapper">
<div class="slideshows">
<div class="slideshow slideshow--hero">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
<div class="slideshow slideshow--contrast slideshow--contrast--before">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
<div class="slideshow slideshow--contrast slideshow--contrast--after">
<div class="slides">
<div class="slide slide1"></div>
<div class="slide slide2"></div>
<div class="slide slide3"></div>
</div>
</div>
</div>
</div>
</body>
</html>


Try adding this css link.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/8.0.0/sanitize.min.css">
Also this is a SCSS codepen, not css. If you want the css to work you have to convert it
https://jsonformatter.org/scss-to-css


Your html
tag needs to be at the start of your code for the css part to function properly .

Related

Page turn Animation Effect

i need book page turn Animation Effect loading screen . i created for one turn i need continuous turn how to make book like loading.
I want to implement this page turn book effect.
for loading screen.
need to add new turn page after turn one page
.cssload-thecube {
width: 96px;
height: 69px;
margin: 0 auto;
margin-top: 49px;
position: relative;
background-color: #000;
}
.cssload {
width: 73px;
height: 73px;
margin: 0 auto;
margin-top: 49px;
position: relative;
background-color: rgb(43,160,199);
}
.cssload-thecube .cssload-cube {
position: relative;
}
.cssload-thecube .cssload-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
content: "";
position: absolute;
top: -36px;
left: 15px;
width: 100%;
height: 100%;
background-color: rgb(43,160,199);
animation: cssload-fold-thecube 2.76s infinite linear both;
-o-animation: cssload-fold-thecube 2.76s infinite linear both;
-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
transform: scale(1.1) rotateZ(90deg);
-o-transform: scale(1.1) rotateZ(90deg);
-ms-transform: scale(1.1) rotateZ(90deg);
-webkit-transform: scale(1.1) rotateZ(90deg);
-moz-transform: scale(1.1) rotateZ(90deg);
}
#keyframes cssload-fold-thecube {
0%, 50% {
transform: perspective(-180deg) rotateX(-136px);
opacity: 0;
}
50%,
100% {
transform: perspective(136px) rotateX(-180deg);
opacity: 1;
}
}
<div class="cssload-thecube">
<div class="cssload-cube cssload-c2"></div>
</div>

#keyframes cssload-fold-thecube {
0%, 50% {
transform: perspective(-180deg) rotateX(-136px);
opacity: 0;
}
50%,
100% {
transform: perspective(136px) rotateX(-180deg);
opacity: 1;
}
}

Cannot Move CSS Loader Container

I have a problem regarding the positioning of my container.
Keeping the styles whilst removing the position: absolute; on the .dot seems to be proving rather tricky and with each attempt the dots are going all over the place!
To clarify, I'm looking at being able to move the entire loader
.sampleContainer {
float: left;
height: 40px;
width: 60px;
background: white;
}
.loader {
display: inline-block;
float: left;
margin-left:100px;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #888;
position: absolute;
}
.dot_1 {
animation: animateDot1 1.5s linear infinite;
left: 12px;
/**background: #e579b8;**/
}
.dot_2 {
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
.dot_3 {
animation: animateDot3 1.5s linear infinite;
left: 12px;
}
.dot_4 {
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
#keyframes animateDot1 {
0% { transform: rotate(0deg) translateX(-12px); }
25% { transform: rotate(180deg) translateX(-12px); }
75% { transform: rotate(180deg) translateX(-12px); }
100% { transform: rotate(360deg) translateX(-12px); }
}
#keyframes animateDot2 {
0% { transform: rotate(0deg) translateX(-12px); }
25% { transform: rotate(-180deg) translateX(-12px); }
75% { transform: rotate(-180deg) translateX(-12px); }
100% { transform: rotate(-360deg) translateX(-12px); }
}
#keyframes animateDot3 {
0% { transform: rotate(0deg) translateX(12px); }
25% { transform: rotate(180deg) translateX(12px); }
75% { transform: rotate(180deg) translateX(12px); }
100% { transform: rotate(360deg) translateX(12px); }
}
#keyframes animateDot4 {
0% { transform: rotate(0deg) translateX(12px); }
25% { transform: rotate(-180deg) translateX(12px); }
75% { transform: rotate(-180deg) translateX(12px); }
100% { transform: rotate(-360deg) translateX(12px); }
}
<div class="sampleContainer">
<div class="loader">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>

you need to set position:relative to parent, otherwise it will be out of the DOM flow.
As for my tests you don't need the .loader CSS
.sampleContainer {
float: left;
height: 40px;
width: 60px;
background: white;
position: relative;
background: lightblue;
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 4px;
background: #888;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 15px 8px
}
.dot_1 {
animation: animateDot1 1.5s linear infinite;
left: 12px;
/**background: #e579b8;**/
}
.dot_2 {
animation: animateDot2 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
.dot_3 {
animation: animateDot3 1.5s linear infinite;
left: 12px;
}
.dot_4 {
animation: animateDot4 1.5s linear infinite;
animation-delay: 0.5s;
left: 24px;
}
#keyframes animateDot1 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(180deg) translateX(-12px);
}
75% {
transform: rotate(180deg) translateX(-12px);
}
100% {
transform: rotate(360deg) translateX(-12px);
}
}
#keyframes animateDot2 {
0% {
transform: rotate(0deg) translateX(-12px);
}
25% {
transform: rotate(-180deg) translateX(-12px);
}
75% {
transform: rotate(-180deg) translateX(-12px);
}
100% {
transform: rotate(-360deg) translateX(-12px);
}
}
#keyframes animateDot3 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(180deg) translateX(12px);
}
75% {
transform: rotate(180deg) translateX(12px);
}
100% {
transform: rotate(360deg) translateX(12px);
}
}
#keyframes animateDot4 {
0% {
transform: rotate(0deg) translateX(12px);
}
25% {
transform: rotate(-180deg) translateX(12px);
}
75% {
transform: rotate(-180deg) translateX(12px);
}
100% {
transform: rotate(-360deg) translateX(12px);
}
}
<div style="float:left">Deleting 'Folder Name' folder</div>
<div class="sampleContainer">
<div class="loader">
<span class="dot dot_1"></span>
<span class="dot dot_2"></span>
<span class="dot dot_3"></span>
<span class="dot dot_4"></span>
</div>
</div>

Pulsing Heart CSS animation

I`m working on an animated heart only with CSS.
I want it to pulse 2 times, take a small break, and then repeat it again.
What I have now:
small ==> big ==> small ==> repeat animation
What I'm going for:
small ==> big ==> small ==> big ==> small ==> pause ==> repeat animation
How can I do it?
My code :
#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
-webkit-transition: opacity 7s ease-in-out;
-moz-transition: opacity 7s ease-in-out;
-o-transition: opacity 7s ease-in-out;
transition: opacity 7s ease-in-out;}
#keyframes heartFadeInOut {
0% {
opacity:1;
}
14% {
opacity:1;
}
28% {
opacity:0;
}
42% {
opacity:0;
}
70% {
opacity:0;
}
}
#heart img.top {
animation-name: heartFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
animation-direction: alternate;
}
<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
<img class="top" src="https://goo.gl/IIW1KE" width="100px">
</div>
See also this Fiddle.

You can incorporate the pause into the animation. Like so:
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
Working example:
https://jsfiddle.net/t7f97kf4/
#keyframes heartbeat
{
0%
{
transform: scale( .75 );
}
20%
{
transform: scale( 1 );
}
40%
{
transform: scale( .75 );
}
60%
{
transform: scale( 1 );
}
80%
{
transform: scale( .75 );
}
100%
{
transform: scale( .75 );
}
}
div
{
background-color: red;
width: 50px;
height: 50px;
animation: heartbeat 1s infinite;
}
<div>
Heart
</div>
Edit:
Working example with pure CSS heart shape:
https://jsfiddle.net/qLfg2mrd/
#keyframes heartbeat
{
0%
{
transform: scale( .75);
}
20%
{
transform: scale( 1);
}
40%
{
transform: scale( .75);
}
60%
{
transform: scale( 1);
}
80% {
transform: scale( .75);
}
100%
{
transform: scale( .75);
}
}
#heart
{
position: relative;
width: 100px;
height: 90px;
animation: heartbeat 1s infinite;
}
#heart:before,
#heart:after
{
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after
{
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart"></div>

Pulse 2 times, take a small break, and then repeat it again
Try this. Going with animation opacity is a bad choice. transform: scale() will do the job.
.heart:before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
font-family: 'icons';
font-size: 21px;
text-indent: 0;
font-variant: normal;
line-height: 21px;
}
.heart {
position: relative;
width: 500px;
overflow: inherit;
margin: 50px auto;
list-style: none;
-webkit-animation: animateHeart 2.5s infinite;
animation: animateHeart 2.5s infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
top: 0;
left: 50%;
width: 120px;
height: 200px;
background: red;
border-radius: 100px 100px 0 0;
-webkit-transform: rotate(-45deg) translateZ(0);
transform: rotate(-45deg) translateZ(0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 26%;
-webkit-transform: rotate(45deg) translateZ(0);
transform: rotate(45deg) translateZ(0);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
#-webkit-keyframes animateHeart {
0% {
-webkit-transform: scale(0.8);
}
5% {
-webkit-transform: scale(0.9);
}
10% {
-webkit-transform: scale(0.8);
}
15% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(0.8);
}
100% {
-webkit-transform: scale(0.8);
}
}
#keyframes animateHeart {
0% {
transform: scale(0.8);
}
5% {
transform: scale(0.9);
}
10% {
transform: scale(0.8);
}
15% {
transform: scale(1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
span {
font-family: 'Cantora One', sans-serif;
font-size: 64px;
position: absolute;
top: 165px;
}
<div class="heart">
</div>

I like ketan's answer, but I wanted to improve the heart animation to make it more realistic.
A heart does not double in size when it beats. 10% change in size looks better to me.
I like it getting both larger and smaller
When it stops moving altogether it looks dead to me. Even when it isn't beating, it needs to expand or contract a little
I removed the "alternate directions" code so that it runs the same way through every time
I explicitly have the heart start end and at normal scale (1) and have the animation in the middle of the sequence. It seems clearer that way to me.
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
#keyframes heartFadeInOut {
0% {transform: scale(1);}
25% {transform: scale(.97);}
35% {transform: scale(.9);}
45% {transform: scale(1.1);}
55% {transform: scale(.9);}
65% {transform: scale(1.1);}
75% {transform: scale(1.03);}
100% {transform: scale(1);}
}
#heart img.bottom {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 2s;
}
<div id="heart" >
<img class="bottom" src="https://i.stack.imgur.com/iBCpb.png" width="100px">
</div>

Based on various comments and making use of the ♥ we'll get this:
body {
font-size: 40pt;
color: red;
}
#keyframes heartbeat {
0% {
font-size: .75em;
}
20% {
font-size: 1em;
}
40% {
font-size: .75em;
}
60% {
font-size: 1em;
}
80% {
font-size: .75em;
}
100% {
font-size: .75em;
}
}
div {
animation: heartbeat 1s infinite;
}
<div>
♥
</div>

body{
margin: 0;
padding: 0;
background: #1f1f1f;
}
body:before
{
position: absolute;
content: '';
left: 50%;
width: 50%;
height: 100%;
background: rgba(0,0,0,.2);
}
.center
{
position: absolute;
top:50%;
left: 50%;
background: #1f1f1f;
transform: translate(-50%,-50%);
padding: 100px;
border: 5px solid white;
border-radius: 100%;
box-shadow:20px 20px 45px rgba(0,0,0,.4);
z-index: 1;
overflow: hidden;
}
.heart
{
position: relative;
width: 100px;
height: 100px;
background:#ff0036;
transform: rotate(45deg) translate(10px,10px);
animation: ani 1s linear infinite;
}
.heart:before
{
content: '';
width: 100%;
height: 100%;
background: #ff0036;
position: absolute;
top:-50%;
left:0;
border-radius: 50%;
}
.heart:after
{
content:'';
width: 100%;
height: 100%;
background: #ff0036;
position: absolute;
bottom:0;
right:50%;
border-radius: 50%;
}
.center:before
{
content: '';
position: absolute;
top:0;
left:-50%;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3);
}
#keyframes ani{
0%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
25%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
30%{
transform: rotate(45deg) translate(10px,10px) scale(1.4);
}
50%{
transform: rotate(45deg) translate(10px,10px) scale(1.2);
}
70%{
transform: rotate(45deg) translate(10px,10px) scale(1.4);
}
90%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
100%{
transform: rotate(45deg) translate(10px,10px) scale(1);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HeartBeat Animation</title>
<link rel="stylesheet" href="Style.css" type="text/css">
</head>
<body>
<div class="center">
<div class="heart">
</div>
</div>
</body>
</html>
Output
for more: Heart Beating Animation

I think this is what you want for your image animation. There is no need of top image. Just use bottom.
#button{
width:450px;
height:450px;
position:relative;
top:48px;
margin:0 auto;
text-align:center;
}
#heart img{
position:absolute;
left:0;
right:0;
margin:0 auto;
}
#keyframes heartFadeInOut {
0%
{ transform: scale( .5 ); }
20%
{ transform: scale( 1 ); }
40%
{ transform: scale( .5 ); }
60%
{ transform: scale( 1 ); }
80%
{ transform: scale( .5 ); }
100%
{ transform: scale( .5 ); }
}
#heart img.bottom {
animation-name: heartFadeInOut;
animation-iteration-count: infinite;
animation-duration: 1.5s;
animation-direction: alternate;
}
<div id="heart" >
<img class="bottom" src="https://goo.gl/nN8Haf" width="100px">
</div>

I needed this for a project I was working on. I was trying to make it look as realistic as possible, and this is what I came up with.
#keyframes heartbeat {
0% {
transform: scale( .95 );
}
20% {
transform: scale( .97 );
}
30% {
transform: scale( .95 );
}
40% {
transform: scale( 1 );
}
100% {
transform: scale( .95 );
}
}
animation: heartbeat 1s infinite;

div that follow background image

My problem is that I'm making a responsive web app, and I need a background image, where I want some dot's in div's to follow/stick to the background image. For me it dosen't matter if the background scales or just cuts the sides.
i have made a fiddle: http://jsfiddle.net/2bhk5n5y/6/
html:
<div id="map">
<div id="point1" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
<div id="point2" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
<div id="point3" class="point-location"><div class="point-dot"></div><div class="point-pulse"></div></div>
</div>
css:
body {
background-color:#000000;}
#map {
width:100%;
height:600px;
background: url('https://treasurehuntdesign.com/wp-content/uploads/2010/09/how-to-make-a-treasure-map-9.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#point1 {
left: 20%;
top: 10%;}
#point2 {
left: 400px;
top: 150px;}
#point3 {
left: 500px;
top: 400px;}
.point-location {
position: fixed;
z-index: 2;
transform: rotateX(60deg);
-ms-transform: rotateX(60deg);
-moz-transform: rotateX(60deg);
-webkit-transform: rotateX(60deg);}
.point-dot{
width: 13px;
height: 13px;
border: 2px solid #000000;
border-radius: 30px;
background: #000000;
position: fixed;
top: 21px;
left: 21px;}
.point-pulse{
border: 5px solid #000;
background: transparent;
border-radius: 60px;
height: 50px;
width: 50px;
transform: scale(0.5);
animation: pulse 10s ease-out;
animation-iteration-count: infinite;
-ms-transform: scale(0.5);
-ms-animation: pulse 10s ease-out;
-ms-animation-iteration-count: infinite;
-moz-transform: scale(0.5);
-moz-animation: pulse 10s ease-out;
-moz-animation-iteration-count: infinite;
-webkit-transform: scale(0.5);
-webkit-animation: pulse 10s ease-out;
-webkit-animation-iteration-count: infinite;}
#keyframes pulse {
0% {
transform: scale(0);
opacity: 0.8;
}
10% {
transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
transform: scale(2);
opacity: 0;
}}
#-ms-keyframes pulse {
0% {
-ms-transform: scale(0);
opacity: 0.8;
}
10% {
-ms-transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
-ms-transform: scale(2);
opacity: 0;
}}
#-moz-keyframes pulse {
0% {
-moz-transform: scale(0);
opacity: 0.8;
}
10% {
-moz-transform: scale(2);
opacity: 0;
border: 5px solid #FFFFFF;
}
100% {
-moz-transform: scale(2);
opacity: 0;
}}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(0);
opacity: 0.8;
}
10% {
-webkit-transform: scale(2);
opacity: 0;
border: 5px solid #2b99df;
}
100% {
-webkit-transform: scale(2);
opacity: 0;
}}
Hope my question is clear enough, else just ask.

as you said it does not matter if it's cut off all you have to do is make sure the points are positioned relative to the center of the map, as you are centering the map.
.point-location
{
position: absolute;
top:50%;
left:50%;
}
http://jsfiddle.net/2bhk5n5y/7/

Making a CSS3 animation more reliable among browsers

I have this CSS3 animation working on codepen.
HTML
<div class="heart heart1"></div>
<div class="heart heart2"></div>
CSS3
html, body{
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
overflow: hidden;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -50px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin :100% 100%;
}
.heart1{
animation: heart-anim 1s linear .4s infinite;
}
.heart2{
animation: pounding .5s linear infinite alternate;
}
.heart1:after, .heart1:before{
background-color: #ff7693;
}
#keyframes pounding{
0%{ transform: scale(1.5); }
100%{ transform: scale(1); }
}
#keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
Check it here: http://codepen.io/RadValentin/pen/sfnCE
As you can see is working ok, BUT, if I post the exact code to my local server OR to jsfiddle it does not work any more: http://jsfiddle.net/40aydbfr/
I believe the animation is not made according to the best practices since it breaks very easily.
So, Why it does not work outside of codepen and how can I make it more cross browser compatible.
PS: Im using Chrome.

It doesn't work because you are missing vendor prefixes for -webkit- browsers.
The reason why it works on codepen is because, if you click on the settings button above the CSS window, you'll see that -prefix-free is enabled, which means it adds the prefixes automatically.
Always check browser support, if something doesn't work.
Updated Codepen
Updated Fiddle
html,
body {
width: 100%;
height: 100%;
min-width: 500px;
min-height: 500px;
overflow: hidden;
}
.heart {
position: absolute;
width: 100px;
height: 90px;
top: 50%;
left: 50%;
margin-top: -45px;
margin-left: -50px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
.heart1 {
-webkit-animation: heart-anim 1s linear .4s infinite;
animation: heart-anim 1s linear .4s infinite;
}
.heart2 {
-webkit-animation: pounding .5s linear infinite alternate;
animation: pounding .5s linear infinite alternate;
}
.heart1:after,
.heart1:before {
background-color: #ff7693;
}
#-webkit-keyframes pounding {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#keyframes pounding {
0% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
#keyframes heart-anim {
46% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
52% {
transform: scale(1.5);
}
55% {
transform: scale(3);
}
100% {
opacity: 0;
transform: scale(50);
}
}
<div class="heart heart1"></div>
<div class="heart heart2"></div>