CSS Animations not fully displaying in safari - cross-browser

So I'm new to using CSS animations and thought I'd play around to learn it. I can get everything displayed and working fine in Chrome but I'm having difficulty getting it to display properly if FF and Safari. (In FF the foreground animation doesn't work and in Safari only the rotate works.)
My HTML is basic:
<html>
<head>
<title>Happy Birthday!</title>
<link rel="stylesheet" href="styles.css" media="all" />
</head>
<body>
<div class="wrapper">
<div class="carebear"></div>
</div>
<div class="foreground"></div>
<div class="midground"></div>
<div class="background"></div>
</body>
</html>
And my CSS:
html {
background: url('bg.jpg') 0 100% repeat-x;
width:100%;
height: 100%;
}
.carebear {
background: url('care3.png')0 0 no-repeat;
width: 295px;
height: 274px;
-webkit-animation: float 1.8s linear infinite both;
-moz-animation: float 1.8s linear infinite both;
-o-animation: float 1.8s linear infinite both;
animation: float 1.8s linear infinite both;
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
}
#-webkit-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#-moz-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#-o-keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
#keyframes float {
0%{-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
25%{-webkit-transform: rotate(13deg);
-moz-transform: rotate(13deg);
-o-transform: rotate(13deg);
transform: rotate(13deg);
}
75%{-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
transform: rotate(-12deg);
}
}
.wrapper {
-webkit-animation: move 10s ease-in-out infinite both;
-moz-animation: move 10s ease-in-out infinite both;
-o-animation: move 10s ease-in-out infinite both;
animation: move 10s ease-in-out infinite both;
position: absolute;
top: 15%;
left: 25%;
z-index: 3;
}
#-webkit-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#-moz-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#-o-keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
#keyframes move {
0%{-webkit-transform: translate(0px 50px);
-moz-transform: translate(0px 50px);
-o-transform: translate(0px 50px);
transform: translate(0px 50px);
}
25%{-webkit-transform: translateX(-50px);
-moz-transform: translateX(-50px);
-o-transform: translateX(-50px);
transform: translateX(-50px);
}
45%(-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
)
65%{-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
75%{-webkit-transform: translateX(200px);
-moz-transform: translateX(200px);
-o-transform: translateX(200px);
transform: translateX(200px);
}
}
.foreground, .midground, .background {
width: 100%;
height: 100%;
position: absolute;
bottom: 0; left: 0;
}
.foreground {
-webkit-animation: parallax_fg linear 10s infinite both;
-moz-animation: parallax_fg linear 10s infinite both;
-o-animation: parallax_fg linear 10s infinite both;
animation: parallax_fg linear 10s infinite both;
background: url('cloud-front.png') 0 100% repeat-x;
z-index: 4;
}
#-webkit-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#-moz-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#-o-keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
#keyframes parallax_fg {
100% { background-position-x: -2400px;}
0% {background-position-x: 0px; }
}
.midground {
-webkit-animation: parallax_mg linear 20s infinite;
-moz-animation: parallax_mg linear 20s infinite;
-o-animation: parallax_mg linear 20s infinite;
animation: parallax_mg linear 20s infinite;
background: url('cloud-middle2.png') 0 100% repeat-x;
z-index: 2;
}
#-webkit-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#-moz-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#-o-keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
#keyframes parallax_mg {
100% { background-position: -2000px 100%;}
0% {background-position: 0 100%; }
}
.background {
background-image:
url('bg.jpg');
background-repeat: repeat-x;
background-position: 0 100%;
z-index: 1;
-webkit-animation: parallax_bg linear 40s infinite;
-moz-animation: parallax_bg linear 40s infinite;
-o-animation: parallax_bg linear 40s infinite;
animation: parallax_bg linear 40s infinite;
}
#-webkit-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#-moz-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#-o-keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
#keyframes parallax_bg {
100% { background-position: -1920px 100%;}
0% {background-position: 0 100%;}
}
Thanks for your help!

Related

Animation in mozilla doesn't work properly

I didn't asked about transform origin. I asked why the animation doesn't work on mozilla
I'm stuck doing some animation svg on Mozilla. What I have tried in Chrome the animation worked perfectly fine, but when I tested on mozilla it's doesn't work well. I have put the vendor prefix, still the animation doesn't work properly.
I can't share the svg because the line of code to share here is limited, So please check it out from the demo.
Here is the DEMO
CSS
.trans-animate {
-webkit-transform: translate(-24%,9%);
transform: translate(-24%,9%);
-webkit-animation: wavedash 6s ease-out infinite;
animation: wavedash 6s ease-out infinite;
}
#-webkit-keyframes wavedash {
0% {
-webkit-transform: translate(-28%,9%);
transform: translate(-28%,9%);
}
50% {
-webkit-transform: translate(-42%,9%);
transform: translate(-42%,9%);
}
100% {
-webkit-transform: translate(-20%,9%);
transform: translate(-20%,9%);
}
}
.trans-animate2 {
-webkit-transform: translate(-38%,2%);
transform: translate(-38%,2%);
-webkit-animation: wavedash2 10s ease-out infinite;
animation: wavedash2 10s ease-out infinite;
}
#-webkit-keyframes wavedash2 {
0% {
-webkit-transform: translate(-28%,2%);
transform: translate(-28%,2%);
}
50% {
-webkit-transform: translate(-5%,2%);
transform: translate(-5%,2%);
}
100% {
-webkit-transform: translate(8%,2%);
transform: translate(8%,2%);
}
}
.dolphin-loca {
/*transform: translate(-166%,69%);*/
-webkit-animation: dolphin 8s ease-out infinite;
animation: dolphin 8s ease-out infinite;
}
#-webkit-keyframes dolphin {
0% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
}
50% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
65% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
80% {
-webkit-transform: translate(-172%, -36%);
transform: translate(-172%, -36%);
}
100% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
}
}
.text-dolphin {
-webkit-animation: dolphin-button 8s ease-out infinite;
animation: dolphin-button 8s ease-out infinite;
}
#-webkit-keyframes dolphin-button {
0% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
opacity: 0;
}
50% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 0;
}
65% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 1;
}
78% {
-webkit-transform: translate(-123%, -60%);
transform: translate(-123%, -60%);
opacity: 1;
}
85% {
-webkit-transform: translate(-162%, -60%);
transform: translate(-162%, -60%);
opacity: 0;
}
100% {
-webkit-transform: translate(-172%,40%);
transform: translate(-172%,40%);
opacity: 0;
}
}
.closeEye {
-webkit-animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
animation: eye 1.5s cubic-bezier(.17,.67,.48,.84) infinite;
}
#-webkit-keyframes eye {
0% {
-webkit-transform: translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);
}
10% {
-webkit-transform: translateY(265px) scaleY(0.05);
transform: translateY(265px) scaleY(0.05);
}
15% {
-webkit-transform: translateY(170px) scaleY(0.4);
transform: translateY(170px) scaleY(0.4);
}
25% {
-webkit-transform: translateY(85px) scaleY(0.7);
transform: translateY(85px) scaleY(0.7);
}
30% {
-webkit-transform: translateY(85px) scaleY(0.7);
transform: translateY(85px) scaleY(0.7);
}
35% {
-webkit-transform: translateY(170px) scaleY(0.4);
transform: translateY(170px) scaleY(0.4);
}
40% {
-webkit-transform: translateY(255px) scaleY(0.1);
transform: translateY(255px) scaleY(0.1);
}
100% {
-webkit-transform: translateY(0px) scaleY(1);
transform: translateY(0px) scaleY(1);
}
}

There are two reasons your animation doesn't work on Firefox.
The primary reason is that you have #-webkit-keyframes rules, which work in Chrome, but you have no #keyframes rules, which Firefox needs. You need to include both variants.
The second reason is related to the transform-origin difference between Firefox and Chrome.
Percentages in SVG files are relative to the viewport size (the dimensions of the SVG). That's what Firefox does. So translate(-172%,40%) is putting the dolphin way off the edge of the SVG.
Chrome is calculating percentages relative to the dimensions of the dolphin. That is not the correct behaviour.
If you want your animation to work in both browsers, you need to switch to using absolute pixel values in your transform rules (eg. 100px).
.dolphin-loca {
-webkit-animation: dolphin 8s ease-out infinite;
animation: dolphin 8s ease-out infinite;
}
#-webkit-keyframes dolphin {
0% {
transform: translate(-300px, 100px);
}
50% {
transform: translate(-300px, -100px);
}
65% {
transform: translate(-300px, -100px);
}
80% {
transform: translate(-300px, -100px);
}
100% {
transform: translate(-300px, 100px);
}
}
#keyframes dolphin {
0% {
transform: translate(-300px, 100px);
}
50% {
transform: translate(-300px, -100px);
}
65% {
transform: translate(-300px, -100px);
}
80% {
transform: translate(-300px, -100px);
}
100% {
transform: translate(-300px, 100px);
}
}
<svg x="0px" y="0px" width="1600px" height="450.39px" viewBox="0 0 1600 450.39">
<g id="Layer_7" class="dolphin-loca" >
<path id="XMLID_29_" fill="#0083B7" d="M805.419,255.439c0-44.307-28.647-75.028-71.876-79.144 c1.21-4.736,2.37-7.935-2.083-7.935c-3.665,0-8.222,3.306-11.537,7.72c-44.529,2.807-74.611,34.122-74.611,79.359 c0,12.658,2.772,23.054,7.724,31.504c-4.966,9.543-5.992,22.504-1.546,28.282c5.617,7.3,8.705-3.645,17.415-11.529 c15.167,10.519,32.232,14.748,56.46,14.748c2.102,0,4.185-0.033,6.248-0.098c-0.163,6.328-2.354,13.155-7.468,20.396 c-3.842-5.743-20.614-27.065-47.537-8.519c-1.583,1.09,17.322,28.912,44.758,12.288c-0.328,0.717-0.755,2.152,1.434,1.581 c-4.001,6.03-9.983,19.613,5.826,32.179c1.107,0.88,16.966-18.865-2.171-34.437c5.641-3.797,16.995-12.42,26.062-25.462 c13.228-2.205,20.431-6.272,29.324-12.662c8.699,7.883,11.786,18.811,17.4,11.515c4.446-5.778,3.42-18.739-1.546-28.282 C802.648,278.493,805.419,268.097,805.419,255.439z M725.366,314.436c-44.229,0-74.917-14.978-74.917-59.207 s30.688-74.401,74.917-74.401c44.229,0,74.917,30.172,74.917,74.401S769.595,314.436,725.366,314.436z" />
</g>
</svg>

CSS Translate Issue on Safari

I am working on converting a Gif I made to a CSS animation. Everything works on Chrome, Firefox, Opera, but when it comes to Safari it acts up.
When I initially load the page the images ignore translate and sit below, but once I click out of the Safari tab and back in, the page is updated and the images have the appropriate coordinates given by Translate.
Does anyone know why this would be happening?
HTML:
<section>
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Globe.png" class="globe center" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Red.png" class="center redSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Orange.png" class="center orangeSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Yellow.png" class="center yellowSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Green.png" class="center greenSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Blue.png" class="center blueSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Indigo.png" class="center indigoSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Violet.png" class="center violetSpin" width="50%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/Continents.png" class="center continent" width="170%">
<img src="http://dev.colecampbell.design/CodePen/GayDay/img/GlobeMask.png" class="center knockOut" width="190%">
</section>
CSS:
*{
margin: 0px;
padding: 0px;
}
body{
background-color:#333;
overflow: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
z-index: 5;
display:block;
}
.continent{
left: 72%;
animation:slide 9s infinite;
animation-timing-function: linear;
z-index: 3;
transform: translate(-50%,-50%);
}
.globe{
z-index: 2;
transform: translate(-50%, -50%);
}
.knockOut{
z-index: 4;
transform: translate(-50%,-50%);
}
/*All working above!*/
/*ANIMATION*/
/*Content Slide Animation*/
.slide{
animation: ;
}
#-webkit-keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
#-moz-keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
#keyframes slide {
from{left: 71%;}
to{left: 28.5%;}
}
/*Red Arc Animation*/
.redSpin {
-webkit-animation:spinRed 10s linear infinite;
-moz-animation:spinRed 10s linear infinite;
-o-animation:spinRed 10s linear infinite;
animation:spinRed 10s linear infinite;
}
#-o-keyframes spinRed {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
60% { -o-transform: translate(-50%,-50%) rotate(540deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-moz-keyframes spinRed {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
60% { -moz-transform: translate(-50%,-50%) rotate(540deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-webkit-keyframes spinRed {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
60% { -webkit-transform: translate(-50%,-50%) rotate(540deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
#keyframes spinRed {
0% { transform: translate(-50%,-50%) rotate(0deg); }
60% { transform: translate(-50%,-50%) rotate(540deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Orange Arc Animation*/
.orangeSpin {
-webkit-animation:spinOrange 5s linear infinite;
-moz-animation:spinOrange 5s linear infinite;
-o-animation:spinOrange 5s linear infinite;
animation:spinOrange 5s linear infinite;
}
#-o-keyframes spinOrange {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(-720deg); }
}
#-moz-keyframes spinOrange {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(-720deg); }
}
#-webkit-keyframes spinOrange {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(-720deg); }
}
#keyframes spinOrange {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(-720deg); }
}
/*Yellow Arc Animation*/
.yellowSpin {
-webkit-animation:yellowSpin 10s linear infinite;
-moz-animation:yellowSpin 10s linear infinite;
-o-animation:yellowSpin 10s linear infinite;
animation:yellowSpin 10s linear infinite;
}
#-o-keyframes yellowSpin {
0% { -o-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-o-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#-moz-keyframes yellowSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-moz-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#-webkit-keyframes yellowSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(-0deg); }
50% {-webkit-transform: translate(-50%,-50%) rotate(-380deg);}
100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#keyframes yellowSpin {
0% { transform: translate(-50%,-50%) rotate(-0deg); }
50% {transform: translate(-50%,-50%) rotate(-380deg);}
100% { transform: translate(-50%,-50%) rotate(-1080deg); }
}
/*Green Arc Animation*/
.greenSpin {
-webkit-animation:greenSpin 10s linear infinite;
-moz-animation:greenSpin 10s linear infinite;
-o-animation:greenSpin 10s linear infinite;
animation:greenSpin 10s linear infinite;
}
#-o-keyframes greenSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-moz-keyframes greenSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-webkit-keyframes greenSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
#keyframes greenSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Blue Arc Animation*/
.blueSpin {
-webkit-animation:blueSpin 10s linear infinite;
-moz-animation:blueSpin 10s linear infinite;
-o-animation:blueSpin 10s linear infinite;
animation:blueSpin 10s linear infinite;
}
#-o-keyframes blueSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
50% {-o-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -o-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#-moz-keyframes blueSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
50% {-moz-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -moz-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#-webkit-keyframes blueSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
50% {-webkit-transform: translate(-50%,-50%) rotate(-530deg);}
100% { -webkit-transform: translate(-50%,-50%) rotate(-1080deg); }
}
#keyframes blueSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
50% {transform: translate(-50%,-50%) rotate(-530deg);}
100% { transform: translate(-50%,-50%) rotate(-1080deg); }
}
/*Indigo Arc Animation*/
.indigoSpin {
-webkit-animation:indigoSpin 10s linear infinite;
-moz-animation:indigoSpin 10s linear infinite;
-o-animation:indigoSpin 10s linear infinite;
animation:indigoSpin 10s linear infinite;
}
#-o-keyframes indigoSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-moz-keyframes indigoSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(1080deg); }
}
#-webkit-keyframes indigoSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(1080deg); }
}
#keyframes indigoSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(1080deg); }
}
/*Violet Arc Animation*/
.violetSpin {
-webkit-animation:violetSpin 10s linear infinite;
-moz-animation:violetSpin 10s linear infinite;
-o-animation:violetSpin 10s linear infinite;
animation:violetSpin 10s linear infinite;
}
#-o-keyframes violetSpin {
0% { -o-transform: translate(-50%,-50%) rotate(0deg); }
100% { -o-transform: translate(-50%,-50%) rotate(360deg); }
}
#-moz-keyframes violetSpin {
0% { -moz-transform: translate(-50%,-50%) rotate(0deg); }
100% { -moz-transform: translate(-50%,-50%) rotate(360deg); }
}
#-webkit-keyframes violetSpin {
0% { -webkit-transform: translate(-50%,-50%) rotate(0deg); }
100% { -webkit-transform: translate(-50%,-50%) rotate(360deg); }
}
#keyframes violetSpin {
0% { transform: translate(-50%,-50%) rotate(0deg); }
100% { transform: translate(-50%,-50%) rotate(360deg); }
}
CodePen: http://codepen.io/Cole-Campbell/pen/MJVxdK

You can use vendor prefix for transform like below for all. It's working for me.
-webkit-transform: translate(-50%,-50%);
-webkit-transform: -webkit-translate(-50%,-50%);
You can also check here caniuse.com for vendor browser support.

CSS Animation Error

I am trying to create a CSS3 only animation that makes a span (one letter) look like it swings back and forth and then falls off the screen while turning. Here is my CSS:
#-webkit-keyframes swing {
10% { -webkit-transform: rotate(15deg); }
15% { -webkit-transform: rotate(-10deg); }
20% { -webkit-transform: rotate(5deg); }
25% { -webkit-transform: rotate(-5deg); }
30% { -webkit-transform: rotate(2deg); }
35% { -webkit-transform: rotate(-1deg); }
40% { -webkit-transform: rotate(0deg); }
75% { -webkit-transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
100% { -webkit-transform: rotate(15deg); -webkit-transform:translate(0, 1500px); }
}
#keyframes swing {
10% { transform: rotate(15deg); }
15% { transform: rotate(-10deg); }
20% { transform: rotate(5deg); }
25% { transform: rotate(-5deg); }
30% { transform: rotate(2deg); }
35% { transform: rotate(-1deg); }
40% { transform: rotate(0deg); }
75% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
100% { transform: rotate(15deg); -webkit-transform: translate(0, 1500px); }
}
.animateone {
display: inline-block;
-webkit-animation-name: swing;
animation-name: swing;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-animation-duration: 3s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
And here is the result: Result
Why isn't the 'A' rotating as it falls?

You should write your transforms into a single statement:
#keyframes swing {
75% { transform: rotate(700deg) translate(0, 1500px); }
100% { transform: rotate(700deg) translate(0, 1500px); }
}
UPDATED
If you want rotate when falling, you should use two animations separately:
#keyframes translate {
10% { transform: translate(0, 0); }
15% { transform: translate(0, 0); }
20% { transform: translate(0, 0); }
25% { transform: translate(0, 0); }
30% { transform: translate(0, 0); }
35% { transform: translate(0, 0); }
40% { transform: translate(0, 0); }
75% { transform: translate(0, 1500px); }
100% { transform: translate(0, 1500px); }
}
#keyframes rotate {
10% { transform: rotate(15deg); }
15% { transform: rotate(-10deg); }
20% { transform: rotate(5deg); }
25% { transform: rotate(-5deg); }
30% { transform: rotate(2deg); }
35% { transform: rotate(-1deg); }
40% { transform: rotate(0deg); }
75% { transform: rotate(700deg); }
100% { transform: rotate(700deg); }
}
.rotate {
display: inline-block;
animation-name: rotate;
transform-origin: top center;
animation-duration: 5s;
animation-fill-mode: both;
}
.translate {
display: inline-block;
animation-name: translate;
transform-origin: top center;
animation-duration: 5s;
animation-fill-mode: both;
}
<header>
<h1>W.I.P.<?h1>
<h2>
A Text
<span class="translate">
<span class="rotate">A</span>
</span>
dventure
</h2>
</header>

In first place, you can only set a transform property at a time. If you want to combine 2, set them in a comma separate list. (ROX was right about this).
In the second place, order of the transforms is important. If you want the span to move while rotating, the order must be the one that you see in the snippet.
I have also changed the transform origin, to make it visually more smooth, and changed the animation to linear for the same reason. Nut of course you can adjust it as you want
#-webkit-keyframes swing {
10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;}
15% { transform: translate(0, 0px) rotate(-10deg); }
20% { transform: translate(0, 0px) rotate(5deg); }
25% { transform: translate(0, 0px) rotate(-5deg); }
30% { transform: translate(0, 0px) rotate(2deg); }
35% { transform: translate(0, 0px) rotate(-1deg); }
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;}
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;}
75% { transform: translate(0, 150px) rotate(375deg); }
100% { transform: translate(0, 150px) rotate(375deg); transform-origin: top center;}
}
#keyframes swing {
10% { transform: translate(0, 0px) rotate(15deg); transform-origin: top center;}
15% { transform: translate(0, 0px) rotate(-10deg); }
20% { transform: translate(0, 0px) rotate(5deg); }
25% { transform: translate(0, 0px) rotate(-5deg); }
30% { transform: translate(0, 0px) rotate(2deg); }
35% { transform: translate(0, 0px) rotate(-1deg); }
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: top center;}
40% { transform: translate(0, 0px) rotate(0deg); transform-origin: center center;}
75% { transform: translate(0, 150px) rotate(375deg); }
100% { transform: translate(0, 150px) rotate(375deg); transform-origin: top center;}
}
.animateone {
display: inline-block;
-webkit-animation: swing 3s infinite linear;
animation: swing 3s infinite linear;
transform-origin: top center;
}
<span class="animateone">A</a>

CSS3 Arrow animation is not working [duplicate]

This question already has an answer here:
How do I make Sass work?
(1 answer)
Closed 7 years ago.
I am trying to animate an arrow downwards to indicate scroll down in a parallex site.
I have got this code from Codepen.
See working demo here : CodePen arrow animation
I am exactly using the same code on my site but it does not animate.
The arrow shows up but it does not animate.
What I am doing wrong?
HTML:
<div class="encircle bounce animated">
<div class="arrow">
</div>
</div>
CSS:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#-ms-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
#mixin animation($animation) {
-webkit-animation: #{$animation};
-moz-animation: #{$animation};
-ms-animation: #{$animation};
animation: #{$animation};
}
#mixin transform($transform) {
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
transform: $transform;
}
#include keyframes(bounce) {
0%, 20%, 50%, 80%, 100% {
#include transform(translateY(0));
}
40% {
#include transform(translateY(-20px));
}
60% {
#include transform(translateY(-10px));
}
}
body {
background: black;
}
.encircle {
width:60px;
height:60px;
border-radius:60px;
border: solid 2px white;
position: fixed;
bottom: 0;
left: 50%;
}
.arrow {
margin:0 auto;
margin-top: 13px;
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
#include animation(bounce 2s infinite);
}

You have SASS source code and it'll not work for you if you just include it like a css file. you need a SASS pre-compiler or use directly the generated css
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#-ms-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
-moz-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
60% {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
body {
background: black;
}
.encircle {
width: 60px;
height: 60px;
border-radius: 60px;
border: solid 2px white;
position: fixed;
bottom: 0;
left: 50%;
}
.arrow {
margin: 0 auto;
margin-top: 13px;
width: 30px;
height: 30px;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
background-size: contain;
}
.bounce {
-webkit-animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-ms-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
to read more about SASS

make png swing to work on most browsers

I have a png like
<img class="swing" src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" />
How can I apply swing effect to it?
I was looking in goolge and found this code
#-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
20% { -moz-transform: rotate(15deg); }
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-5deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
20% { -o-transform: rotate(15deg); }
40% { -o-transform: rotate(-10deg); }
60% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-5deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation-name: swing;
-moz-animation-name: swing;
-o-animation-name: swing;
animation-name: swing;
}
But it may not work? Is there a way to apply swing effect to png and see it on most browsers?
How to apply the effect, I made a jsfiddle

You need to give the animation a duration
.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 2s;
-moz-animation: swing 2s;
-o-animation: swing 2s;
animation: swing 2s;
}