I'm trying to add a noise overlay using CSS:
.noise {
position: fixed;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
width: 200%;
height: 200vh;
background: transparent url('../img/noise.png') repeat 0 0;
background-repeat: repeat;
animation: bg-animation .2s infinite;
opacity: .5;
visibility: visible;
}
#keyframes bg-animation {
0% { transform: translate(0,0) }
10% { transform: translate(-5%,-5%) }
20% { transform: translate(-10%,5%) }
30% { transform: translate(5%,-10%) }
40% { transform: translate(-5%,15%) }
50% { transform: translate(-10%,5%) }
60% { transform: translate(15%,0) }
70% { transform: translate(0,10%) }
80% { transform: translate(-15%,0) }
90% { transform: translate(10%,5%) }
100% { transform: translate(5%,0) }
}
I'm calling the code in HTML with <div class="noise"></div>
However, when I do this, it disables scrolling on my site altogether. It has something to do with position:fixed;. But what am I doing wrong?
Related
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 .
For a movie website I have a moving background with a grain texture to create a movie vibe.
Later in the website I want to have a :hover input, but because of the grain background it doesn't seem to work.
The background will be attached to the section and when you hover over the div with the class hover, the content from the test div need to be show up.
This is my HTML and CSS:
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
}
.test {
display: none;
color: white;
}
.hover:hover+.test {
display: block;
}
<section class="section">
<div class="hover">
</div>
<div class="test">test</div>
</section>
Here is the JSFiddle:
https://jsfiddle.net/g8dhz14j/3/
When I try the code without the .section:after, the code works. Can someone help out?
Add pointer-events: none; to the .section::after rules.
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section::after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
z-index: 0;
pointer-events: none;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
}
.blue {
display: none;
color: white;
}
.hover:hover+.blue {
display: block;
}
<section class="section">
<div class="hover">
</div>
<div class="blue">THIS IS A TEST</div>
</section>
The :after pseudo element is on top of the .hover element. You can change that by using z-index:
.section {
background-color: black;
padding-top: 12rem;
height: 1000px;
width: 100vw;
}
.section:after {
animation: grain 8s steps(10) infinite;
background-image: url(https://previews.123rf.com/images/maximkostenko/maximkostenko1602/maximkostenko160200071/53576792-grain-texture-overlay-background-for-your-desig-dusty-overlay-texture.jpg);
content: "";
height: 300%;
left: -50%;
opacity: 0.05;
position: fixed;
top: -110%;
width: 300%;
}
#keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
.hover {
width: 100px;
height: 100px;
background-color: red;
position: relative;
z-index: 1;
}
.test {
display: none;
color: white;
}
.hover:hover + .test {
display: block;
}
<section class="section">
<div class="hover"></div>
<div class="test">THIS IS A TEST</div>
</section>
I am running into an issue in my mobile media query - anything under a 640px viewport. I have a circle that comes together and forms a full circle (see snippet), but for some reason in my media query, the circle doesn't quite line up, and I am unsure why as I am using the same math that makes it work in a desktop version.
Here is what it looks like within the 640 media query:
So how this works is I give .circle the same height and width. So let's say 200px for both height and width.
Then the class of .spinner, I divide the height and width of the .circle by two. So I would have 125px for height and width.
Then I set the border size, so lets use 5px. What I do is add that border size to the height and width numbers of .spinner and use that figure, which would be 130px to everything else ranging from .top, .bottom, q2, mask, etc.
That is how I get this to work and my math in my media query is not wrong. Does anyone see why this isn't lining up?
.blue {
background-color: blue;
width: 100%;
height: 600px;
}
.circle {
z-index: 99;
width: 500px;
height: 500px;
position: absolute;
background: inherit;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 250px;
height: 250px;
position: absolute;
border: 5px solid #b5f2ff;
z-index: 10;
}
.top {
top: 255px;
left: 255px;
border-radius: 0 0 255px 0;
border-left: none;
border-top: none;
-webkit-transform-origin: top left;
transform-origin: top left;
}
.bottom {
border-radius: 255px 0 0 0;
border-bottom: none;
border-right: none;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
}
.topright,
.bottomleft {
-webkit-animation: rotate90 4s linear forwards;
animation: rotate90 4s linear forwards;
}
.topleft,
.bottomright {
-webkit-animation: rotate180 4s linear forwards;
animation: rotate180 4s linear forwards;
}
.mask {
width: 255px;
height: 255px;
position: absolute;
opacity: 1;
background: inherit;
z-index: 15;
-webkit-animation: mask 4s linear forwards;
animation: mask 4s linear forwards;
}
.q2 {
top: 0;
left: 0;
}
.q4 {
top: 255px;
left: 255px;
}
#-webkit-keyframes rotate90 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20%,
80% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate90 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
20%,
80% {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes rotate180 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40%,
60% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate180 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40%,
60% {
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
}
100% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#-webkit-keyframes mask {
0% {
z-index: 15
}
40%,
60% {
z-index: 4
}
100% {
z-index: 15
}
}
#keyframes mask {
0% {
z-index: 15
}
40%,
60% {
z-index: 4
}
100% {
z-index: 15
}
}
#circle-text {
display: none;
position: absolute;
color: #FFF;
font-size: 2.3em;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 100;
}
#media screen and (max-width:640px) {
.circle {
z-index: 100;
width: 250px;
height: 250px;
-webkit-transform: translate(-50%, -50%) rotate(0deg);
transform: translate(-50%, -50%) rotate(0deg);
}
.spinner {
width: 125px;
height: 125px;
z-index: 10;
}
.top {
top: 130px;
left: 130px;
border-radius: 0 0 130px 0;
}
.bottom {
border-radius: 130px 0 0 0;
}
.mask {
width: 130px;
height: 130px;
}
.q4 {
top: 130px;
left: 130px;
}
}
<div class="blue">
<div class="circle">
<div class="spinner top topright"></div>
<div class="spinner top topleft"></div>
<div class="spinner bottom bottomleft"></div>
<div class="spinner bottom bottomright"></div>
<div class="mask q2"></div>
<div class="mask q4"></div>
</div>
</div>
You have an inconsistent use of box-sizing:border-box in your CSS. It's being used in media queries, so that it doesn't apply to all screen sizes. And it would mess up your calculations.
I am trying to create animation with this arrow that will move up and down and also rotate or change its direction on 0% and 100%. But what I got so far is that arrow will rotate for sec on 100% and then return back to previous direction. So basically what I am trying to do is, arrow should point up on its way up and point down on return or on its way down. Can I do this with just CSS animations?
DEMO
On way up arrow should have this direction and on way down this one
Also I want to animate that rotation on 100% and 0% with rotate if its possible.
Just Change the animation with below code
#keyframes bounceAndRotate {
0% {
transform:rotate(0deg);top:-20px;
}
25% {
transform:rotate(00deg);top:-10px;
}
50% {
transform:rotate(0deg);top:0px;
}
75% {
transform:rotate(180deg);top:10px;
}
100% {
transform: rotate(180deg);top:20px;
}
}
For Demo
CLICK HERE For Demo
Just do away with the alternating direction setting and adjust the keyframe settings such that for the first 50% duration the upward movement and spin is done and then for the next 50% it comes down with the arrow facing downwards. The animation-duration should be doubled because the alternate effect is produced by the keyframes itself.
But doing this would spoil one part of your current animation where the arrow spins to face downward and then spins back to face upwards. Also removing alternate would make the reverse rotation on 100% not happen. But that can be overcome by adding an extra keyframe. This extra keyframe must mirror the initial position of the element (which is no rotation).
.arrow {
height: 50px;
position: relative;
width: 10px;
background: black;
margin: 100px;
display: inline-block;
animation: bounceAndRotate 2s infinite linear;
}
.arrow:before {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(50deg);
left: -10px;
}
.arrow:after {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(-50deg);
right: -10px;
}
#keyframes bounceAndRotate {
0% {
transform: translateY(0) rotate(0deg);
}
12.5% {
transform: translateY(-10px);
}
25% {
transform: translateY(-20px);
}
37.5% {
transform: translateY(-30px);
}
50% {
transform: translateY(-40px) rotate(180deg);
}
90% {
transform: translateY(0px) rotate(180deg);
}
100% {
transform: translateY(0px);
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="arrow"></div>
If you want that part also to be maintained before the downward move then add extra keyframes like in the below snippet. Here the sequence of events is as follows:
Arrow goes upwards with arrow head pointing upwards.
When it reaches the topmost point, it rotates 180deg such that the arrow head points downwards.
Once the rotation is complete, it again rotates back to its original position (arrow head pointing up while maintaining the position)
Once this is complete, it again rotates 180deg such that the arrow head points downwards.
Arrow moves downwards with the arrow head pointing downwards.
.arrow {
height: 50px;
position: relative;
width: 10px;
background: black;
margin: 100px;
display: inline-block;
animation: bounceAndRotate 2s infinite linear;
}
.arrow:before {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(50deg);
left: -10px;
}
.arrow:after {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(-50deg);
right: -10px;
}
#keyframes bounceAndRotate {
0% {
transform: translateY(0) rotate(0deg);
}
12.5% {
transform: translateY(-10px);
}
25% {
transform: translateY(-20px);
}
37.5% {
transform: translateY(-30px);
}
45% {
transform: translateY(-40px) rotate(180deg);
}
55%, 60%{
transform: translateY(-40px);
}
67.5%{
transform: translateY(-40px) rotate(180deg);
}
90% {
transform: translateY(0px) rotate(180deg);
}
100% {
transform: translateY(0px);
}
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="arrow"></div>
You can do like following way:
.arrow {
height: 50px;
position: relative;
width: 10px;
background: black;
margin: 100px;
display: inline-block;
animation: bounceAndRotate 2s infinite linear alternate;
}
.arrow:before {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(50deg);
left: -10px;
}
.arrow:after {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(-50deg);
right: -10px;
}
#keyframes bounceAndRotate {
0% {
transform: translateY(10px) rotate(0deg);
}
20% {
transform: translateY(-20px);
}
50% {
transform: translateY(-40px) rotate(180deg);
}
60% {
transform: translateY(-30px) rotate(180deg);
}
80% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0px) rotate(180deg);
}
}
<div class="arrow"> </div>
Hope it helps. Working Fiddle
Edit:
And if you want 360 degree rotation then do like following by removing alternative:
.arrow {
height: 50px;
position: relative;
width: 10px;
background: black;
margin: 100px;
display: inline-block;
animation: bounceAndRotate 2s infinite linear;
}
.arrow:before {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(50deg);
left: -10px;
}
.arrow:after {
content: " ";
width: 10px;
background: black;
height: 35px;
position: absolute;
top: -10px;
transform: rotate(-50deg);
right: -10px;
}
#keyframes bounceAndRotate {
0% {
transform: translateY(10px) rotate(0deg);
}
20% {
transform: translateY(-20px);
}
50% {
transform: translateY(-40px) rotate(180deg);
}
60% {
transform: translateY(-30px) rotate(180deg);
}
80% {
transform: translateY(-20px) rotate(180deg);
}
100% {
transform: translateY(0px) rotate(360deg);
}
}
<div class="arrow"> </div>
Thanks for all anwsers, but this is what i ended up with
DEMO
#keyframes bounceAndRotate {
0% {
transform: translateY(0px) rotate(0deg);
}
35% {
transform: translateY(-195px) rotate(0deg);
}
50% {
transform:translateY(-200px) rotate(180deg);
}
85% {
transform: translateY(-5px) rotate(180deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
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>