I have an SVG element with a circle inside it. The SVG is being rotated infinitely using a keyframe animation:
#keyframes rotate {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
svg{
width: 500px;
height: 500px;
display: block;
animation: rotate 2.9s linear infinite;
transform-origin: center;
}
My issue is that, on Internet Explorer 11, the rotation seems to wobble slightly as it is rotating (all other browsers behave as expected). Try focusing on the top or left edges of the black box.
Is there any way I can avoid this?
Here's a fiddle with the test scenario.
And below is a gif that showcases it as well:
In case anyone is wondering, here's how I managed to work around this: The SVG's transform-origin should be set to the circle's radius (in this case 250px) in all dimensions(x, y and z).
svg{
/* other styles go here */
transform-origin: 250px 250px 250px;
}
Related
I have this code
.wave {
position: absolute;
height: 90vh;
width: 1920px * 2;
background-image: url(...);
background-size: 1920px 100%;
background-repeat: repeat-x;
animation: wave 3s linear infinite;
#keyframes wave {
0% {
transform: translateX(0);
// left: 0;
}
100% {
transform: translateX(-1920px);
// left: -1920px;
}
}
}
which should loop seamlessly creating a continuous wave motion. Unfortunately, in safari, it flickers on every loop. I have tried all the -webkit stuff and -webkit-backface-visibility: hidden, but no luck
If I remove transform: translateX(...) and animate left instead, the flickering disappears, but I want to use transform for perfomance reasons
I have created this simple example here
You can see the flicker on every loop (3s) in safari. Works fine in chrome
Adding -webkit-transform: translateZ(0); to img or picture element will do the trick
In this keyframe animation, everything that I want to animate works, but when you remove the background colour change from the animation, it breaks the border-radius animation. I know the border-radius is actually applying but because we're using scale instead of changing the actual height and width of the div it's not visible. But what I don't understand is why adding in the background change to the animation changes this and allows the border-radius animation to do what you expect it to do.
<div class="square"></div>
.square {
width: 350px;
height: 350px;
margin: 200px auto;
background: #41A9F0;
animation: box 5s linear infinite;
}
#keyframes box {
0% {
transform: scale(0.2) rotate(0deg);
border-radius: 0;
}
50% {
transform: scale(2) rotate(180deg);
border-radius: 50%;
background:#5ABE8A;
}
100% {
transform: scale(0.2) rotate(360deg);
}
}
Animation i've created works fine on Chrome and Firefox, but is pixelated on Safari (version 10.1.1) and IE11.
Tried using translateZ() / translate3d() so the gpu can render the animations but nothing happened.
I've avoided using top, left props. Had an idea of using the will-change prop but it doesn't take animation as a value.
Removing the border radius would fix the rendering issue.
Can someone explain the cause of this and is there a solution to fix this issue?
https://codepen.io/imrdev/pen/awBZOW
html ->
<div class="dot"></div>
css - >
/* KEYFRAME ANIMATION */
#keyframes ease {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(4)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
#keyframes ease2 {
0% {
transform: scale(0) rotate(0);
}
50% {
transform: scale(6)
rotate(.01deg);
}
100% {
transform: scale(0) rotate(0);
}
}
.dot {
$scale-duration: 15s;
background-color: black;
position: relative;
width: 7px;
height: 7px;
border-radius: 50%;
&::before,
&::after {
content: "";
background: red;
width: 7px;
height: 7px;
border-radius: inherit;
opacity:.3;
position: absolute;
transform: translate(0px, 0px);
}
&::before {
animation: ease 5s ease-in-out infinite;
}
&::after {
animation: ease2 5s ease-in-out infinite both $scale-duration/15;
}
}
Thanks :-)
I have not enough reputation so i can't comment yet, so sorry if this doesn't qualify as a proper answer, but have you tried changing the size to something bigger than 7px and use eg scale(1) instead of scale(4)?
if you need to scale the width and height up by 4 or 6, why not just double the original size and scale up by 2 ?
I wouldn't be surprise if safari doesn't really scale the size up, but kinda like "zooms in" and since the original size is just 7 x 7 px it gets pixelated when "zoomed in"
and regarding to the will-change: you wouldn't use "animation" but "transform"
I have a simple GIF image that I am applying a keyframe animation to (to make it spin infinitely), and for some reason, if I hover over links elsewhere on the page, they randomly jump up or down by a pixel or two.
When I remove the DOM element that has the animation on it (the image) the jumping does not occur, leading me to believe it is somehow caused by the CSS animation somehow. This ONLY happens in Chrome, even the most recent update of Chrome.
I have read all other related questions on here and nothing has resolved it yet, it is NOT the -webkit-backface-visibility fix needed here.
Example CSS:
#mixin spin {
-webkit-animation: spin360 1.26s infinite linear;
animation: spin360 1.26s infinite linear;
}
#-webkit-keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes spin360 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.animated-image {
position: absolute;
#include spin;
}
Example DOM:
<h3 class="header">
Heading title
</h3>
<div class="animated-image"><img src="../img/loader.gif"></div>
Working example: http://codepen.io/caseytrombley/pen/YWYqRQ
I think the problem is in chrome the img it isn't vertical and horizontal centered.
I suggest you use flexbox to centered and must be fixed
Other way is use the img like background image and put
background-position: center center;
background-size: contain;
but I can imagine it's an animated gif, in that case must be fixed with flex
I have a CSS3 Animation for an indeterminate progress bar. In the animation I have a gradient oscillating back and forth along the progress bar. I would like to flip the image of gradient horizonally as it travels back to the left side of the progress bar. Basically the gradient always fades out the opposite direction the image is moving. Unfortunately I can't figure out a way for the image to flip horizontally BEFORE it starts moving back towards the left and am getting some odd transformations of the image as it flips.
I have created a JSFiddle to show how it looks right now.
http://jsfiddle.net/MtWzL/
Here is the CSS I'm currently using for the animation:
#-webkit-keyframes loader {
0% {
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
-webkit-transform-origin:left;
}
50% {
-webkit-transform: translateX(300px);
}
100% {
-webkit-transform: translateX(-100px);
-webkit-transform: scaleX(-1);
}
}
#keyframes loader {
0% {
transform: scaleX(1);
transform: translateX(-100px);
transform-origin:left;
}
50% {
transform: translateX(300px);
}
100% {
transform: translateX(-100px);
transform: scaleX(-1);
}
}
.slider
{
animation: loader 2.5s infinite linear;
-webkit-animation: loader 2.5s infinite linear; /* Safari and Chrome */
background: url('http://s23.postimg.org/mglkwgxuv/indeterminate_bg.png') no-repeat;
border-radius: 10px;
height: 10px;
position: relative;
width: 100px;
z-index: 999;
opacity: .6;
}
.container {
background: -webkit-linear-gradient(#00c3ff,#0071bc);
background: linear-gradient(#00c3ff,#0071bc);
border-radius: 3px;
height: 10px;
overflow: hidden;
width: 300px;
}
.background {
background: rgba(0,0,0,0.7);
border-radius: 3px;
display: inline-block;
padding: 10px;
}
There are 2 issues that need to be fixed
first of all, this
-webkit-transform: scaleX(1);
-webkit-transform: translateX(-100px);
won't work as you expect; the second property over-rides the first one, as you can not set 2 different values for a property in separate lines.
the correct syntax would be
-webkit-transform: translateX(-100px) scaleX(1);
And second, if you want a sudden change in some value, you need to set it from a keyframe to another keyframe close enough to the first one.
So, the solution would be
#-webkit-keyframes loader {
0% { -webkit-transform: translateX(-100px) scaleX(1); }
50% { -webkit-transform: translateX(300px) scaleX(1); }
51% { -webkit-transform: translateX(300px) scaleX(-1); }
100% { -webkit-transform: translateX(-100px) scaleX(-1); }
}
corrected fiddle
I have corrected only the webkit transforms, but the same concept applies to the rest.
I was watching for your problem since you put it here, but I guess its some kind of bug we won't solve or maybe I just dont understand why it is working like that.
Since I had no clue how to solve it I manage to do example for you with alternative solution
EXAMPLE
As you can see I modified your jsfiddle, simple words, created another slide loader .sliderBack that goes backwards. Hope it will helps you somehow. Peace :)