I have 4 cards that lay flat and "stand up" on hover however they also flip as they had a front and a back. I only want one-sided cards and I don't know how to stop them flipping. I have removed the html for the back of the card however I can't seem to stop the card flipping in CSS. What do I need to change in my code to stop them flipping?
.card-holder {
width: 90%;
height: 70%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: -370em;
text-align: center;
}
div:target .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
div:target .card-face:before {
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card {
display: inline-block;
perspective: 1000px;
position: relative;
margin: 50px;
}
.card:hover .card-face {
animation: flip-2 1s;
animation-fill-mode: forwards;
}
.card:before{
animation: shadow-2 1s;
animation-fill-mode: forwards;
}
.card-face {
display: block;
width: 139px;
height: 250px;
transform-origin: bottom;
animation: flip 1s;
animation-direction: reverse;
animation-fill-mode: forwards;
}
.front-card, .project-img {
width: inherit;
height: inherit;
}
.card:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
transition: all 0.5s;
transform-origin: bottom;
animation: shadow 1s;
animation-direction: normal;
animation-fill-mode: forwards;
}
.card-face {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front-card {
/* backface-visibility: hidden; */
position: absolute;
top: 0;
left: 0;
}
/* .back-card {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
} */
.front-card {
transform: rotateY(180deg);
}
#keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
#keyframes shadow {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;
}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;
}
}
/* #keyframes flip-2 {
0% {
transform: rotateX(50deg) rotateY(0deg);}
60% {
transform: rotateX(0deg); }
100% {
transform: rotateX(0deg) rotateY(180deg);}
} */
#keyframes shadow-2 {
0% {
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0deg) translateZ(-60px) scale(0.85);
opacity: 1;}
60% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.15) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
100% {
transform: rotateX(95deg) translateZ(-40px) scaleY(0.05) scaleX(0.65) rotateY(0);
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
opacity: 0.25;}
}
<div class="card-holder" id="all-cards">
<div class="card" id="card-1">
<a href="#card-1" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/0RUrrQF.jpg" alt="Death">
</div>
</a>
</div>
<div class="card" id="card-2">
<a href="#card-2" class="card-face">
<div class="front-card">
<img class="project-img" src="https://i.imgur.com/ulOYmlT.jpg" alt="Death">
</div>
</a>
</div>
</div>
remove this line line 100% {
transform: rotateX(0deg) rotateY(180deg);
} from ...
#keyframes flip {
0% {
transform: rotateX(50deg) rotateY(0deg);
}
60% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(0deg) rotateY(180deg);
}
}
I am attempting to create a keyframe to make a picture of a bell appear as if it is ringing. As of now, the keyframe is not running or at least appears not to be running.
Does anyone see what I am doing wrong?
#subscribeButton {
width: 50%;
height: 150px;
background: #1b8c00;
background: #5fae4c;
border: 2px solid #FFF;
position: fixed;
left: 0;
bottom: 0;
cursor: pointer;
}
#subscribeButton img {
width: 70px;
height: auto;
display: block;
margin: 10px auto;
text-align: center;
-webkit-animation-name: shake;
animation-name: shake;
-webkit-animation-duration: 0.4s;
animation-duration: 0.4s;
animation-timing-function: ease-in-out;
animation-iteration-count: 2;
animation-delay: 2s;
/* transform-origin(50% 6px);*/
}
#subscribeButtonText {
color: #FFF;
font-family: Verdana, sans-serif;
font-size: .8rem;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
#-webkit-keyframes shake {
0%, 100% { transform(rotate(0)); }
20%, 60% { transform(rotate(6deg)); }
40%, 80% { transform(rotate(-6deg)); }
}
#keyframes shake {
0%, 100% { transform(rotate(0)); }
20%, 60% { transform(rotate(6deg)); }
40%, 80% { transform(rotate(-6deg)); }
}
<div id="subscribeButton">
<img src="https://images-na.ssl-images-amazon.com/images/I/41ft-avvlhL.jpg" alt="bell">
<div id="subscribeButtonText">Subscribe for Inventory Notifications</div>
</div>
Updated keyframe code:
#keyframes shake {
0%,
100% {
transform: rotate(0deg);
}
10%,
40% {
transform: rotate(6deg);
}
40%,
60% {
transform: rotate(0deg);
}
60%,
90% {
transform: rotate(-6deg);
}
}
Your keyframe rules have some typos
#keyframes shake {
0%,
100% {
transform: rotate(0deg);
}
20%,
60% {
transform: rotate(6deg);
}
40%,
80% {
transform: rotate(-6deg);
}
}
#subscribeButton {
width: 50%;
height: 150px;
background: #1b8c00;
background: #5fae4c;
border: 2px solid #fff;
cursor: pointer;
}
#subscribeButton img {
width: 70px;
height: auto;
display: block;
margin: 10px auto;
text-align: center;
animation-name: shake;
animation-timing-function: ease-in-out;
animation-duration: .5s;
animation-iteration-count: 2;
animation-delay: .5s;
}
#keyframes shake {
0%,
100% {
transform: rotate(0deg);
}
20%,
60% {
transform: rotate(6deg);
}
40%,
80% {
transform: rotate(-6deg);
}
}
<div id="subscribeButton">
<img src="https://images-na.ssl-images-amazon.com/images/I/41ft-avvlhL.jpg" alt="bell">
</div>
The below code display animated text in most browsers, except IE where It runs but you don't see it. Could I have some guidance on how to solve this?
Please refer to this link to see the example > http://jsfiddle.net/pherrera/posvken7/
and here is the code:
<div class="container">
<div id="background" class="card">
<div class="sp-container">
<div class="sp-content">
<div class="sp-globe"></div>
<h3 class="frame-1">message 1</h3>
<h3 class="frame-2">message 2</h3>
<h3 class="frame-3">message 3</h3>
<h3 class="frame-4">Now!</h2>
<h3 class="frame-5">
<span>this</span> <span>is</span> <span>a message</span>
</h3>
<a class="sp-circle-link" href="#">again!</a>
</div>
</div>
</div>
</div>
body, html {
background-color: #282828;
display: table;
height: 100%;
width: 100%;
}
.container {
display: table-cell;
vertical-align: middle;
}
.card {
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
border: 0px none;
-webkit-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
box-shadow: 0px 0px 75px 0px rgba(255, 255, 255, 0.1);
}
#background {
width: 600px;
height: 500px;
margin: 0 auto;
background: rgba(92, 92, 92, 1);
background: -moz-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(92, 92, 92, 1)), color-stop(100%, rgba(59, 59, 59, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
background: radial-gradient(ellipse at center, rgba(92, 92, 92, 1) 0%, rgba(59, 59, 59, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5c5c5c', endColorstr='#3b3b3b', GradientType=1);
}
a {
text-decoration: none;
}
h1.main, p.demos {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.sp-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 0;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.sp-content {
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h3 {
position: absolute;
top: 50%;
line-height: 100px;
height: 90px;
margin-top: -50px;
font-size: 60px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h3.frame-1 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h3.frame-2 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
.sp-container h3.frame-3 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h3.frame-4 {
font-size: 200px;
-webkit-animation-delay: 9s;
-moz-animation-delay: 9s;
-ms-animation-delay: 9s;
animation-delay: 9s;
}
.sp-container h3.frame-5 {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h3.frame-5 span {
-webkit-animation: blurFadeIn 3s ease-in 12s backwards;
-moz-animation: blurFadeIn 1s ease-in 12s backwards;
-ms-animation: blurFadeIn 3s ease-in 12s backwards;
animation: blurFadeIn 3s ease-in 12s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h3.frame-5 span:nth-child(2) {
-webkit-animation-delay: 13s;
-moz-animation-delay: 13s;
-ms-animation-delay: 13s;
animation-delay: 13s;
}
.sp-container h3.frame-5 span:nth-child(3) {
-webkit-animation-delay: 14s;
-moz-animation-delay: 14s;
-ms-animation-delay: 14s;
animation-delay: 14s;
}
.sp-globe {
position: absolute;
width: 282px;
height: 273px;
left: 50%;
top: 50%;
margin: -137px 0 0 -141px;
-webkit-animation: fadeInBack 3.6s linear 14s backwards;
-moz-animation: fadeInBack 3.6s linear 14s backwards;
-ms-animation: fadeInBack 3.6s linear 14s backwards;
animation: fadeInBack 3.6s linear 14s backwards;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
-webkit-transform: scale(5);
-moz-transform: scale(5);
-o-transform: scale(5);
-ms-transform: scale(5);
transform: scale(5);
}
.sp-circle-link {
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #fff;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-webkit-animation: fadeInRotate 1s linear 16s backwards;
-moz-animation: fadeInRotate 1s linear 16s backwards;
-ms-animation: fadeInRotate 1s linear 16s backwards;
animation: fadeInRotate 1s linear 16s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
background: #85373b;
color: #fff;
}
/**/
#-webkit-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
#-webkit-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
#-webkit-keyframes fadeInBack {
0% {
opacity: 0;
-webkit-transform: scale(0);
}
50% {
opacity: 0.4;
-webkit-transform: scale(2);
}
100% {
opacity: 0.2;
-webkit-transform: scale(5);
}
}
#-webkit-keyframes fadeInRotate {
0% {
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
#-moz-keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
#-moz-keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
#-moz-keyframes fadeInBack {
0% {
opacity: 0;
-moz-transform: scale(0);
}
50% {
opacity: 0.4;
-moz-transform: scale(2);
}
100% {
opacity: 0.2;
-moz-transform: scale(5);
}
}
#-moz-keyframes fadeInRotate {
0% {
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
#keyframes blurFadeInOut {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%, 75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
#keyframes blurFadeIn {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50% {
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
#keyframes fadeInBack {
0% {
opacity: 0;
transform: scale(0);
}
50% {
opacity: 0.4;
transform: scale(2);
}
100% {
opacity: 0.2;
transform: scale(5);
}
}
#keyframes fadeInRotate {
0% {
opacity: 0;
transform: scale(0) rotate(360deg);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
Basically the only issue here that modern versions of IE will have a problem with is rendering a shadow on an transparent element. This is a known limitation with a couple of quirks; if the blur radius is 0 then text will be visible. Otherwise, for a shadow to be cast, the color of the text needs to be somewhat opaque.
After playing with this for a brief time I came up with a potential work-around that should suffice in your demo. Since text-shadows already work, and are able to be positioned from an offset, you can position the element itself in the opposite direction:
.blur {
top: -100vh;
position: relative;
text-shadow: 0 100vh 1em #000;
}
In order to show only a blurred text, we push the shadow down 100vh. This will set it off-screen, so we also push the element casting the shadow up 100vh, which restores the blurred text to the original position of its host element.
In this case I'm usin ga veritcal offset, but you may find that this is not ideal for some scenarios. For instance, your document is taller, and your blurred regions are further down, you may find that a lateral offset is better. In that case, you can avoid unnecessary scrollbars by hiding lateral overflow:
body {
overflow-x: hidden;
}
I've composed a demo fiddle that shows the results online here. Upon constructing this, I did notice that Chrome presently has a layout issue which is evident during resizing — it appears the vm (and presumably vh) are not kept in sync with the current viewport dimensions. You may need to use another unit if this presents an issue with your project.
Applying this effect to works that appear with a delay is also possible. I've taken the liberty to create a second fiddle that demonstrates this effect. The markup for which is very straight-forward, resembling what you already have:
<h1>
<span>Hello</span>
<span>World</span>
</h1>
<h2>
<span>Additional</span>
<span>Information</span>
<span>Provided</span>
<span>Eventually</span>
</h2>
The CSS accomplishes a few things:
Center the text in the <body> (could be limited to the headers)
Position elements off-screen, and text-shadows on-screen
Animate text-shadow property at various delays to reveal nested <span> elements
body {
text-align: center;
font-family: "Segoe UI";
}
span {
opacity: 0;
vertical-align: middle;
text-shadow: 100vw 0 3em #000;
position: relative; left: -100vw;
animation: fadein 2s ease-in-out forwards;
}
/* Controls 'Hello' and 'World' */
h1 span:nth-child(1) { animation-delay: 1s; }
h1 span:nth-child(2) { animation-delay: 2s; }
/* Controls 'Stack Overflow is Awesome */
h2 span { animation-delay: 3s; }
#keyframes fadein {
to {
opacity: 1;
text-shadow: 100vw 0 0 #000;
}
}
The end-result is a smooth, cross-browser, blurring effect:
DONE:
After some digging around the net, I managed to add some bits of code that made it work on IE (IE 11 at least).
I pretty much had to add and fiddle with these lines:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=0)”;
filter: alpha(opacity=0);
zoom: 1; filter: alpha(opacity=0);
See here: http://jsfiddle.net/posvken7/8/
Css animations, child selectors, and gradients are supported in IE7, check out caniuse.com to see what css is supported in each browser/version.
Also, filter and animation are not supported in IE at all.
Oh, and it breaks in IE 9, it that helps anyone.
I've been trying to get a simple CSS animation to work. Check this link here for the demo.
In Firefox it works fine, but I can't get it to work in Chrome/Safari.
My CSS code is ~
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
transform: rotate(-45deg);
left: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
animation-delay: 1.1s;
}
#keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#-webkit-keyframes pulsate {
0% {
transform: scale(0.1, 0.1);
-webkit-transform: scale(0.1, 0.1);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
opacity: 0;
}
}
#keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
}
}
#-webkit-keyframes bounce {
0% {
opacity: 0;
transform: translateY(-2000px) rotate(-45deg);
-webkit-transform: translateY(-2000px) rotate(-45deg);
}
60% {
opacity: 1;
transform: translateY(30px) rotate(-45deg);
-webkit-transform: translateY(30px) rotate(-45deg);
}
80% {
transform: translateY(-10px) rotate(-45deg);
-webkit-transform: translateY(-10px) rotate(-45deg);
}
100% {
transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
}
}
Can anyone point out where I'm going wrong?
You forgot to add -webkit- to your animation and transform. Check this fiddle in chrome its working http://jsfiddle.net/Gt4rP/2/
CSS
.pin {
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: #00cae9;
position: absolute;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
left: 50%;
margin: -20px 0 0 -20px;
}
.pin:after {
content: "";
width: 14px;
height: 14px;
margin: 8px 0 0 8px;
background: #e6e6e6;
position: absolute;
border-radius: 50%;
}
.bounce {
-webkit-animation-name: bounce;
-webkit-animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-name: bounce;
animation-fill-mode: both;
animation-duration: 1s;
}
.pulse {
background: #d6d4d4;
border-radius: 50%;
height: 14px;
width: 14px;
position: absolute;
left: 50%;
margin: 11px 0px 0px -12px;
transform: rotateX(55deg);
-webkit-transform: rotateX(55deg);
z-index: -2;
}
.pulse:after {
content: "";
border-radius: 50%;
height: 40px;
width: 40px;
position: absolute;
margin: -13px 0 0 -13px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0;
box-shadow: 0 0 1px 2px #00cae9;
-webkit-animation-delay: 1.1s;
animation: pulsate 1s ease-out;
animation-iteration-count: infinite;
animation-delay: 1.1s;
}
I currently have a problem with the implementation of a loader CSS on Chrome.
I post the jsFiddle.
Nothing happens in Chrome but it works fine on Mozilla.
Thank you for your help
http://jsfiddle.net/Tpf9X/
HTML :
<div class="ball"></div>
<div class="ball1"></div>
CSS
.ball {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoff .5s infinite linear;
-webkit-animation: spinoff .5s infinite linear;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
};
}
#-moz-keyframes spinoff {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-360deg);
};
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
};
}
#-webkit-keyframes spinoff {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
};
}
You need to remove semi-colons after braces and it will work
Demo
100% {
-moz-transform: rotate(360deg);
}; /* <--- Invalid, need to get rid of those */
BTW, nice animation.
Complete Code
.ball {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 35px #2187e7;
width: 50px;
height: 50px;
margin: 0 auto;
-moz-animation: spin .5s infinite linear;
-webkit-animation: spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border: 5px solid rgba(0,183,229,0.9);
opacity: .9;
border-top: 5px solid rgba(0,0,0,0);
border-left: 5px solid rgba(0,0,0,0);
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 30px;
height: 30px;
margin: 0 auto;
position: relative;
top: -50px;
-moz-animation: spinoff .5s infinite linear;
-webkit-animation: spinoff .5s infinite linear;
}
#-moz-keyframes spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-moz-keyframes spinoff {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(-360deg);
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#-webkit-keyframes spinoff {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(-360deg);
}
}