I am trying to use a CSS animation to create a preloader animation for my gallery. When I am applying the CSS code below it looks ok in Chrome, Firefox, but it doesn't look nice in Internet Explorer and Safari. For your reference here is the original picture - for a demo see this fiddle.
I dug through most articles related to this topic and applied the fixes that seem to make sense (see comments in code), but alas it still looks like crap.
Do any of you CSS wizards have an solution for this issue?
div.preloader-container {
background-image: url('img/preloader.png') no-repeat !important;
background-size: 20px 20px !important;
height: 20px !important;
width: 20px !important;
position: relative !important;
top: 50% !important;
display: block;
margin-left: auto;
margin-right: auto;
/* Attempt to fix it 1 */
-webkit-backface-visibility: hidden !important;
-ms-backface-visibility: hidden !important;
-moz-backface-visibility: hidden !important;
backface-visibility: hidden !important;
/* Attempt to fix it 2 */
outline: 1px solid transparent !important;
-webkit-animation:spin 2s linear infinite;
-moz-animation:spin 2s linear infinite;
animation:spin 2s linear infinite;
}
#-moz-keyframes spin { 100% {
-moz-transform:rotate(360deg);
}
}
#-webkit-keyframes spin { 100% {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotate(360deg);
}
}
#keyframes spin { 100% {
transform:rotate(360deg);
}
}
Ok my in very specific instance the problem was that re-sizing a 200px image to 20px was handled badly by these browser. As soon as I decreased the size of the png to 40px and resize to 20px with the backgroud-size attribute it works like a charm. Hope that helps other people with the same issue.
Here is a demo fiddle with the solved issue and here is one with the issue still happening.
background-size: 20px 20px;
Related
I am creating an animation while I got this weird issue. Below is a code snippet with a single div with some styles and animation applied to it.
When I run the code, during the animation, I can see a weird trailing effect on the extreme right side of the square.
*{
margin: 0px;
padding: 0px;
}
body{
background-image: radial-gradient(pink, hotpink);
height: 100vh;
width: 100vw;
display: flex;
justify-content:center;
align-items: center;
}
#keyframes zoominout{
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0);
}
}
#outer{
border: 2px solid black;
height: 450px;
width: 450px;
animation: zoominout infinite 4s;
}
<div id="outer"></div>
Whenever I click anywhere or press any button, the trails disappear.
What could be causing this and how should I solve this issue?
Also, this issue occurs only with borders. Without borders, no issue is there.
Update - This issue is with chrome browser only. While using firefox, no trailing lines are visible.
It appears to be your borders that are scaling but somehow remain behind in faded form.
If we take a more minimal example - no border radius, no flexing, you can see it clearly on this square. The first has animation duration 4s and shows separate lines which is what you get but in small form on the circle. The second has animation duration 40s and show more continuous as would be expected as more frames would be possible in the time.
Here's the snippet:
<style>
#keyframes zoominout{
0%{
transform: scale(1.0);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0);
}
}
#outer{
border: 2px solid black;
border-color: magenta;
height: 450px;
width: 450px;
animation: zoominout infinite 4s;
background-color: cyan;
}
</style>
<div id="outer"></div>
So, what to do about it? Somehow the borders aren't totally disappearing but are fading.
Update: here's a quick workaround - animating dimensions rather than scaling. I know it's not the best way to animate (as it possibly isn't using the GPU???) but it seems to work. Of course you'd want to put your circle (now a square) into a container which has the actual width and then use %s. It worked on Chrome, Edge, Firefox on Windows 10 and Safari and Chrome on IOS14. It also removed the slight flicker that was previously seen on Firefox and Safari [which had both worked better on the initial code than Edge or Chrome on Win10].
Snippet with workaround:
<style>
*{
margin: 0px;
padding: 0px;
}
body{
background-image: radial-gradient(pink, hotpink);
height: 100vh;
width: 100vw;
display: flex;
justify-content:center;
align-items: center;
}
#keyframes zoominout{
0%{
width: var(--w);
height: var(--w);
}
50%{
width: calc(var(--w) * 1.1);
height: calc(var(--w) * 1.1);
}
100%{
width: var(--w);
height: var(--w);
}
}
#outer{
--w: 450px;/* you don't have to use a CSS variable but this is just to make it easier to change the width/height if you need to */
border: 2px solid black;
height: var(--w);
width: var(--w);
animation: zoominout infinite 4s;
}
</style>
<div id="outer"></div>
I'm tryin to make a infinte animation but at some point it seems to hop back to the start.
Thats the code
h1 {
background: url(Pepesad.png) repeat-x;
width: 90%;
margin: 1em auto;
max-width: 600px;
height: 512px;
animation: flybirds 1s linear infinite;
}
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: 300px 0px
}
}
Some of the CSS rules you mentioned for h1 seems unnecessary for your purpose. Mentioning the width gives the animation very less space. Consider providing the h1 a container/ wrapper and set appropriate width for it.
h1 {
background: url(Pepesad.png) repeat-x;
height: 512px;
width: 5076px;
animation: flybirds 1s linear infinite;
}
Also in the keyframes you have mentioned the x-axis to 300px which cause the breaking effect during the animation. I suggest you update it
#keyframes flybirds {
from {
background-position: 0px 0px
}
to {
background-position: -100% 0px
}
}
Another alternative you could use is :
#keyframes flybirds {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-1692px, 0, 0);
}
}
Note: the reason why I suggest to use an additional at all, rather than animating background-position on h1, is so that we can use an animated transform to do the movement, which is much more performant.
I have a purely CSS animating ticker that on page load works perfectly. The speed of the animation is working exactly how I want it.
The problem is when you resize the browser. For some reason when you do this the animation speeds up and when the message has gone off the screen it doesn't come back for ages. I think its an issue with calculating widths but unsure how to fix it.
jsFiddle
https://jsfiddle.net/79cmwcjw/2/
CSS / Reduced for Brevity
#keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
visibility: visible;
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.inside {
width: auto !important;
display: inline-block !important;
height: 20px !important;
line-height: 20px;
white-space: nowrap;
padding:0 0 0 100% !important;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 20s;
}
.inside a {
display: inline-block;
padding:0 200% 0 0 !important;
}
It's caused by display: inline-block on .inside element. If you remove that, it will work properly. Here's the jsFiddle: https://jsfiddle.net/79cmwcjw/18/
Update:
Here's the new fiddle: https://jsfiddle.net/79cmwcjw/33/
Basically, you need to add position: absolute to the .inside element, and remove the padding from the a inside.
I am working on modifying this example in some ways for use in my application. This works awesome in Chrome and FF, but in Safari, not so much. If you look you will see in Chrome the pie charts look as expected, but in Safari they are all "whole".
The css (copied from the example) looks like this:
.pie {
display: inline-block;
position: relative;
width: 100px;
line-height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, #655 0);
color: transparent;
text-align: center;
}
#keyframes spin {
to { transform: rotate(.5turn); }
}
#keyframes bg {
50% { background: #655; }
}
.pie::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite, bg 100s step-end infinite;
animation-play-state: paused; <-- Safari's issue
animation-delay: inherit;
}
I noted the second-to-last line in the code to identify the problem. When animation-play-state is set to paused, Safari will not put the animation in the initial condition set by animation-delay. Chrome and FF seem to look at the animation-delay, put the animation in the state it would be at that delay, and then stay paused.
Is there a workaround I am missing where Safari will put the animation in the initial condition and then stay paused?
I want a background image to exapand and then contract on hover.
a:hover{
background-size: 80%;
}
a:hover{
background-size: 85%;
transition: background-size 0.05s ease;
//This is where I want the size to shrink back to it's original size.
}
I know there is a delay-property, but is it possible to add multiple transitions with different delays etc?
One solution I came up with is to add an additional property
a.workaround:hover{
background-size: 80%;
transition-delay: 0.05s;
}
However this seems like a fairly messy solution. For example it doesn't support loops and it scales poorly.
You could instead define a CSS-Animation
See this jsFiddle for a demo: http://jsfiddle.net/qDppZ/
(Only -moz for clearness)
Code:
a {
display: inline-block;
background: url(http://openclipart.org/image/800px/svg_to_png/95329/green_button.png) no-repeat;
background-size: 80%;
width: 100px;
height: 60px;
}
a:hover {
-moz-animation: anim 0.2s; /* Firefox */
}
#-moz-keyframes anim /* Firefox */
{
0% { background-size: 80%;}
50% { background-size: 85%;}
100% { background-size: 80%;}
}