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);
}
}
Related
I have an animation where the text content changes every few seconds, it seems to work perfectly in firefox and chrome, but in Safari the animation runs, but the content doesn't show. I can't find any known compatibility issues with Safari?
example:
https://codepen.io/gazrobbo/pen/dEMVRE
<body>
<div class="sp-container">
<div class="sp-content">
<h2 class="frame-1"></h2>
</div>
</div>
</body>
body {
background: blue;
}
.sp-container {
grid-area: text;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
justify-items: center;
}
.sp-content {
-webkit-transform: translatey(-50%);
transform: translatey(-50%);
width: 70%;
height: 40%;
z-index: 1000;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.sp-container h2 {
position: absolute;
top: 25vh;
line-height: 4rem;
height: 90px;
margin-top: -50px;
font-size: 3.5rem;
width: 100%;
text-align: center;
color: transparent;
font-family: beyond_infinity_-_demoregular;
}
#media only screen and (min-width: 600px) {
.sp-container h2 {
top: 30vh;
font-size: 4.75rem;
}
}
.sp-container h2.frame-1 {
-webkit-animation-delay: 1s;
animation-delay: 1s;
/* animation: blurFadeInOut1 15s ease-in backwards; */
-webkit-animation-name: blurFadeInOut1;
animation-name: blurFadeInOut1;
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.frame-1:after {
content: "";
-webkit-animation-delay: 1s;
animation-delay: 1s;
/* animation: blurFadeInOuttext 15s ease-in backwards; */
-webkit-animation-name: blurFadeInOuttext;
animation-name: blurFadeInOuttext;
-webkit-animation-duration: 15s;
animation-duration: 15s;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-fill-mode: backwards;
animation-fill-mode: backwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
#-webkit-keyframes blurFadeInOut1 {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
5%,
15% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
20% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
21% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
content: "2";
}
25%,
35% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
41% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
content: "3";
}
45%,
55% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
61% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
65%,
75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
81% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
85%,
95% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
}
#keyframes blurFadeInOut1 {
0% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
5%,
15% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
20% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
21% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
content: "2";
}
25%,
35% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
41% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
content: "3";
}
45%,
55% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
60% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
61% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
65%,
75% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
80% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
81% {
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
85%,
95% {
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
transform: scale(0);
}
}
#-webkit-keyframes blurFadeInOuttext {
6% {
content: "Creative Concepts";
}
26% {
content: "Brand Management";
}
46% {
content: "Reprographics";
}
66% {
content: "Flexo HD";
}
86% {
content: "Website Development";
}
100% {
content: "Website Development";
}
}
#keyframes blurFadeInOuttext {
6% {
content: "Creative Concepts";
}
26% {
content: "Brand Management";
}
46% {
content: "Reprographics";
}
66% {
content: "Flexo HD";
}
86% {
content: "Website Development";
}
100% {
content: "Website Development";
}
}
I have tried changing to 5 individual animations, this works, but I would rather keep it as 1 animation if I could get it working.
Ideally, I want the text to change content and display after each fade in and out action.
Use Animate.css library , Example
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
<body>
<h1 class="animated jello">Ahmed Mansour</h1>
</body>
</html>
I have a span element and can not use another. Through this span element I have to achieve spinner/loader functionality and I want behavior looks like given below-
https://codepen.io/supah/pen/BjYLdW
Following is my code which is not working as expected:
<span class="spinner"></span>
.spinner{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
Can any one help me where I am lacking?
Not sure what you were doing with spinner--wholePageWithVeil. But, it's not necessary. The bit you were missing was giving the border a width and style.
body {
background-color: #008;
}
.spinner {
animation: spin 1s infinite ease-in-out;
// animation: dash 2s infinite ease-in-out;
border-radius: 50%;
border-top: 2px solid #fff;
display: inline-block;
height: 2em;
margin: calc(50vh - 1em) calc(50vw - 1em);
width: 2em;
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<span class="spinner"></span>
This is to Easy.
You need to modified some css, give stroke: #fff; into spinner class.
Please check and let me know further clarificaion.
Hope this help.
html, body {
height: 100%;
background-image: linear-gradient(-105deg, #009acc, #363795);
}
.spinner {
animation: rotate 2s linear infinite;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px;
width: 50px;
height: 50px;
stroke: #fff;
}
.path {
stroke: hsl(210, 70, 75);
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
#keyframes rotate {
100% {
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
stroke-dasharray: 1, 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90, 150;
stroke-dashoffset: -124;
}
}
<svg class="spinner" viewBox="0 0 50 50">
<circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
</svg>
Yes you can also create with pure css like that.
Hope this help.
.lds-ring {
display: inline-block;
position: relative;
width: 64px;
height: 64px;
}
.lds-ring span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent;
}
.lds-ring span:nth-child(1) {
animation-delay: -0.45s;
}
.lds-ring span:nth-child(2) {
animation-delay: -0.3s;
}
.lds-ring span:nth-child(3) {
animation-delay: -0.15s;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<div class="lds-ring">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Yes, you need to change animation css like: animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
Hope this help.
span {
box-sizing: border-box;
display: block;
position: absolute;
width: 51px;
height: 51px;
margin: 6px;
border: 6px solid #fff;
border-radius: 50%;
animation: lds-ring 1.2s cubic-bezier(0.5, 0.5, 0.5, 0.5) infinite;
border-color: #000 #000 #000 transparent;
}
#keyframes lds-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<span></span>
The CSS animation commands are working perfectly but you can not see it. you need an image because you are not using <svg> and <circle> as they use in the example you have attached.
Note that the width and height of .spinner class should be the width and height of the spinner image.
Based on your code:
LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--remove comment to use jquery-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
<style>
.spinner {
vertical-align: middle;
width: 128px;
height: 128px;
display: inline-block;
margin-right: 5px;
border-radius: 2em;
-webkit-box-sizing: border-box;
border-top-color: #fff;
-webkit-animation: spin 1s infinite linear;
animation: spin 1s infinite linear;
}
.spinner--wholePageWithVeil{
display: block;
border-radius: 8em;
width: 8em;
height: 8em;
display: inline-block;
animation: dash 2.0s ease-in-out infinite;
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes dash {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<span class="spinner" [class.spinner--wholePageWithVeil]="wholePageWithVeil">
<img src="http://www.pbrennan.net/wp-content/uploads/2014/03/ic_progress.png" alt="">
</span>
</body>
</html>
I have a little problem with my CSS file. I try to make an icon that scale to infinite (works), and when I click on icon, an animation rotate the parent to 90deg and the icon rotate to 45deg (works). But, if I combine the 2 behavior, the rotate of icon break. I want rotate the icon of 45deg, and keep the animation.
A demo example: https://codepen.io/KevinPy/pen/ooEbKY?editors=1100
In my demo, the first occurence works with the rotate to 45deg. The second occurence add the animation (via class), but the rotate is break.
Thank you for your answers.
HTML
<div id="first"><span>+</span></div>
<div id="second"><span class="anim">+</span></div>
SCSS
div {
margin: 25px;
display: inline-block;
position: relative;
background-color: blue;
width: 80px;
height: 80px;
&::before {
position: absolute;
top: 20px;
left: -20px;
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
&.open {
transition: .2s transform linear;
transform: rotate(90deg);
span {
transition: .2s transform linear;
transform: rotate(-45deg);
}
}
&.close {
transition: .2s transform linear;
transform: rotate(0deg);
span {
transition: .2s transform linear;
transform: rotate(0deg);
}
}
}
span {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 60px;
}
.anim {
animation: keyAnim 3.4s linear infinite;
transform-origin: 50%;
}
#keyframes keyAnim {
0%, 100% {
transform: scale(1);
}
35%, 65% {
transform: scale(1.2);
}
50% {
transform: scale(1.5);
}
}
Your animation overrides the transform attribute. You could add a surrounding element:
var first = document.querySelector('#first');
first.onclick = function(event) {
if (first.classList.contains('open')) {
first.classList.remove('open');
first.classList.add('close');
} else {
first.classList.add('open');
first.classList.remove('close');
}
};
var second = document.querySelector('#second');
second.onclick = function(event) {
if (second.classList.contains('open')) {
second.classList.remove('open');
second.classList.add('close');
} else {
second.classList.add('open');
second.classList.remove('close');
}
};
div {
margin: 25px;
display: inline-block;
position: relative;
background-color: blue;
width: 80px;
height: 80px;
}
div::before {
position: absolute;
top: 20px;
left: -20px;
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
div.open {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
div.open .anim_wrap {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div.close {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
div.close .anim_wrap {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
span {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 60px;
}
.anim {
-webkit-animation: keyAnim 3.4s linear infinite;
animation: keyAnim 3.4s linear infinite;
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
#-webkit-keyframes keyAnim {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
35%, 65% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
#keyframes keyAnim {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
35%, 65% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
<div id="first"><span class="anim_wrap">+</span></div>
<div id="second"><span class="anim_wrap"><span class="anim">+</span></span></div>
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 am trying to get one div to rotate around another using CSS3 but for some reason it will not animate at all. I am using Chrome. Can anyone help?
here is the css
.container {
margin: 0 auto;
position: relative;
}
#center {
width: 300px;
height: 300px;
margin: 225px auto 0;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
}
#-webkit-keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#small {
position: absolute;
width: 75px;
height: 75px;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
animation: rot 3s infinite linear;
-webkit-animation: rot 3s linear infinite;
}
and here is the html
<div class="container">
<div id="center"></div>
<div id="small"></div>
</div>
You need to use -webkit prefix proprietary property to ensure that your animation runs in Webkit browsers
You Need To Use Prefix For Webkit Browsers
Demo
.container {
margin: 0 auto;
position: relative;
}
#center {
width: 300px;
height: 300px;
margin: 225px auto 0;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
}
#keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
-webkit-transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#-webkit-keyframes rot {
from {
transform: rotate(0deg)
translate(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translate(-150px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
-webkit-transform: rotate(360deg)
translate(-150px)
rotate(-360deg);
}
}
#small {
position: absolute;
width: 75px;
height: 75px;
border: 5px solid #ddd;
border-radius: 100%;
background: #aaa;
animation: rot 3s infinite linear;
-webkit-animation: rot 3s linear infinite;
transform-origin: 50% 200px;
-webkit-transform-origin: 50% 200px;
}
Side Note: You should use proprietary properties of each browser i.e
-moz, -webkit, -o and -ms so that older versions of the
browser don't fail to animate