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.
I have this css :
.yellowText {
color: #FFFF00;
-ms-transform: rotate(-20deg); /* IE 9 */
-webkit-transform: rotate(-20deg); /* Chrome, Safari, Opera */
transform: rotate(-20deg);
}
.pulse {
-webkit-animation: text-anim;
animation: text-anim 1s;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
-webkit-animation-iteration-count:infinite;
}
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1); }
50% { -webkit-transform: scale(1.1); }
100% { -webkit-transform: scale(1); }
}
#keyframes text-anim {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
Then, I apply it to a text :
<p class="yellowText pulse">Some text here</p>
But now, the text is well-animated, without being rotated by -20°... Any idea of what could be wrong ? I believe this is a problem with the transform property not working with the animation one. Also, what I tried was putting the transform inside the #keyframes text-anim, but what this does is just periodically rotating the text, having it perfectly right the rest of the time...
Thanks in advance for your help !
PS : forgive my bad English, I'm French :P
Your #keyframes are overriding you original transform property.
#-webkit-keyframes text-anim {
0% { -webkit-transform: scale(1 rotate(-20deg); }
50% { -webkit-transform: scale(1.1) rotate(-20deg); }
100% { -webkit-transform: scale(1) rotate(-20deg); }
}
#keyframes text-anim {
0% { transform: scale(1) rotate(-20deg); }
50% { transform: scale(1.1) rotate(-20deg); }
100% { transform: scale(1) rotate(-20deg); }
}
Why isn't transform: scale(0); working on a animated element?
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#box {
width: 150px;
height: 150px;
background: red;
animation: spin .5s infinite linear;
transform: scale(0);
}
I guess its because the keyframe take over transform, but even with !important after transform: scale(0) its still not changing.
http://jsfiddle.net/yun0xu8t/1/
You need to move transform: scale(0); to #keyframes
To rotate and scale together
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg) scale(0); }
}
Hi guys so im hitting a brick wall with 2 issues:
IE the pulse in the middle works but not the circular progress
In safari (win) the curcluar progress does not work
Firefox and Chrome work fine
Any ideas? i literally only have a few hours ot crack this.
NOTE: You have to click on the circle in order to start the animation. Thanks in advance for any help in cracking this for me.
JSFiddle: http://jsfiddle.net/0pkqk5r0/1/
HTML:
<div id="loader">
<svg height="80" width="80" viewBox="-10 -10 220 220">
<path id="back" d="M0,100 a100,100 0 1 0 200,0 a100,100 0 1 0 -200,0" fill="#FF1251" stroke="#FF1251" stroke-width="20" />
<path id="ring" d="M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200,0" fill="none" stroke="#FF1251" stroke-width="20" stroke-dasharray="629" stroke-linecap="round" stroke-dashoffset="629" />
</svg>
<div id="circle"></div>
</div>
CSS:
/* temp */
body {
background: #072237;
}
h3, p {
color: #ffffff;
}
#loader {
position: relative;
width: 80px;
height: 80px;
cursor: pointer;
}
#ring.active {
-webkit-animation: load 6s 1 forwards;
-moz-animation: load 6s 1 forwards;
-o-animation: load 6s 1 forwards;
-ms-animation: load 6s 1 forwards;
animation: load 6s 1 forwards;
}
#circle {
position: absolute;
width: 20px;
height: 20px;
top: 50%;
left: 50%;
margin-left: -10px;
margin-top: -10px;
background: #FFFFFF;
border-radius: 50%;
}
#circle.active {
background: #FF1251;
-webkit-animation: pulse 1.2s 3;
-moz-animation: pulse 1.2s 3;
-o-animation: pulse 1.2s 3;
-ms-animation: pulse 1.2s 3;
animation: pulse 1.2s 3;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
transform: scale(0.8);
}
/* Pulse */
#-webkit-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-moz-keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
#-o-keyframes pulse {
0% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-o-transform: scale(1);
transform: scale(1);
}
40% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-o-transform: scale(0.8);
transform: scale(0.8);
}
}
#-ms-keyframes pulse {
0% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
20% {
-ms-transform: scale(1);
transform: scale(1);
}
40% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
100% {
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
0% {
transform: scale(0.8);
}
20% {
transform: scale(1);
}
40% {
transform: scale(0.8);
}
100% {
transform: scale(0.8);
}
}
/* Loading */
#-webkit-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-o-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#-ms-keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
#keyframes load {
80% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}
The shorthand animations will work on:
IE10+
Safari 9+
Use HTML+TIME for older versions of IE:
.time {behavior: url(#default#time2)}
<div id="circle" class="time" begin="0" end="2" timeAction="style">
Use longhand for older versions of Safari:
#circle.active {
-webkit-animation-name: pulse;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 3;
}
References
Introduction to CSS3 Animations
What's New in Safari
Safari CSS Visual Effects Guide
Internet Explorer 10 Guide for Developers
Internet Explorer 10 on Windows 7
HTML+TIME Specification
time2 Behavior
Using the HTML+TIME Document Object Model (DOM)
Animated DHTML
BUG: HTML+TIME Code Fails Inside an Element Behavior
My animation works quite nicely but it seems its slipping and doesn't seem to roll. What could be the problem?
FIDDLE HERE : http://jsfiddle.net/erkoda3m/2/
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(300px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(300px) rotate(360deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
The diameter is 150px, so circumference will be 150π = 471.24px. So if the rotation angle is 360°, translateX value will be circumference of the ball, or 471.24px :
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(471.24px) rotate(360deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(471.24px) rotate(360deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">
If you want to keep translateX constant and change rotate value, instead, you can calculate the angle by (400/471.24)*360 = 305.57deg
img {
height: 150px;
width: 150px;
animation: roll 4s linear infinite;
-webkit-animation: roll 4s linear infinite;
}
#-webkit-keyframes roll {
0% {
-webkit-transform: translateX(0px) rotate(0deg);
}
50% {
-webkit-transform: translateX(400px) rotate(305.57deg);
}
100% {
-webkit-transform: translateX(0px) rotate(0deg);
}
}
#keyframes roll {
0% {
transform: translateX(0px) rotate(0deg);
}
50% {
transform: translateX(400px) rotate(305.57deg);
}
100% {
transform: translateX(0px) rotate(0deg);
}
}
<img src="http://i.imgur.com/5NvOwB5.png">