Mouse Cursor As .Gif not Animating - html

I am trying to use a gif as a mouse cursor but the cursor is not animating at all for me. I've tried a few different sizes, but no luck.
html, body {
height: 100%;
margin: 0;
padding: 0;
cursor: url(White-Sperm.gif), url(Sperm-Cursor.png), auto;
}
JS Fiddle referencing the gif I'm using is here:
http://jsfiddle.net/Fq9RL/
My designer says that in Safari, it animates "a little" for him, but is stalling and not smooth. It doesn't animate at all in Safari for me and does not work in Chrome for either of us.
Has anyone tried this technique before? We've tried using fewer frames in the gif, a smaller delay, a smaller gif size, etc. Any help is much appreciated!

A similar question was asked here :
Animated cursor support in web applications?
After doing some more research, I don't think it's possible at the moment. It doesn't seem that any of the browsers support animated cursors as of 2/8/2012 using the CSS cursor property. I suppose it could be done using JavaScript to repeatedly change the value of the cursor property every few frames to make it appear animated, but that may be more trouble than it is worth.
So the answer seems to be that it isn't possible at the moment.

One solution is to use the CSS animation to animate the cursor image from a frame to another:
html, body {
height: 100%;
margin: 0;
padding: 0;
cursor: url(frame1.gif), auto;
animation: cursor 1s linear infinite;
}
#keyframes cursor{
0% {
cursor: url(frame1.gif), auto;
}
50% {
cursor: url(frame2.gif), auto;
}
100% {
cursor: url(frame3.gif), auto;
}
}
Add as many frames as needed.

Related

How do I make an animation run on click with only CSS?

I want to make a cursor that when you click, will change to one frame, then 0.5 seconds later, to the next, then back to how it before you clicked. The reason I need it to be css is that I am working on a css only project. I have tried using transition-delay, but you can't have multiple delays on the same property. I can make a cursor change to one frame when clicked, but no more. Here is the code for that:
body {
cursor: url(https://lh3.googleusercontent.com/BlETOnm98yPP5xCHbkFiFREFHNTQqucd_kFkfkYNKKnNohHvvnM7NTlLFq3rAukha0q-JEkouEgvfZnHkrhrzGIaps33RSJOuDV-_NiaPwSfn_cYbp5ayvFkYo4idwDkm-yb1G_jEwpY1zbrNtunux_oGFV-ADsdBVkK5qFqxj5OXMt3Qyw5GDkLgf5cdBHCK91go-7TkV8gT3zwbSWT8gi5tgFkY3UhyTM_X8E0FOU7uLOYBYDlTrEiIuIgqPEWOaj5MbH0j1j871KiLY65x4UsadJDzkpjT3mbfXgoMfDu4p3bE_I9a3Ck2MZq76RxKTH4iDHNwyz2hA0E0BXh2tsoq3mBQEH0h5ywIEDpNqMMQQ1HD33jfqX6TxZT48R6dGso6s4yGruWrMhn4CEwbvuNhOQYEO_r9e8WsIurKqU9bZ7Uiy3YdEtzgKG-sXHV5wJZQv8G0sr-utR9Cu8EzoYBHNdC2Yh-2eE8MAM0yS_15zKp-7igRo9RNhA_0TUkDgb8c4DQ4nC91VfylAA-elZKZtxDySI9U1ZCou1F8q42HJdD8A62CODQ2tlLJ3GMILtXQMM-T_JLhKzzg7gaTk8o9-E3pC5WVyh-yN9dSS-7sUqDBtUUF4bPWgg1WN2CbcJKXzDre_fBkw8hQ5Hzy_2Gp2LoMeSFB1c=s25-no), auto;
}
body:active {
cursor: url(https://lh3.googleusercontent.com/pg5NgqvH-ljQhDjHXV3EHSdX9jYo3_DP2S5r72qH53KZgHjLXBWZb5exYINk7zGA0Xl05TJ4vRdj6Yx1M4gNwLy4jDCjZ_ihsnmO_qDIh5GSxdemoWioqsNjBuR2dyhHy72bToMwv4XRm8a9Rul2hkh9WgpcFRgA8UDPV_D_wCOvxVw6QN6bR472ZQdjCy0QKvHmuzCbuTFnrMCScHJf8OiqJcjhlk04yvaeigm_TJgM8AAgcqtiMJ1MYH5ebI9O34-8HxSPrME47y_9jEN_RSgTPbKD77izoxx531jwIkYbJ5_bSD6NMFDsrub1hlmzexjblGs9bkoC8rbINmCHuUo-zHZaRW3cWkpx-tI4-XjVIgEeoDcwaL0IDOZop2t9aUfbmZQxng-kYVlNzSRwfkWwjAqwJJsS_68T7e7-W_mF1qbdL2BVbihpf8Vy7-8uXYlvHZbiqeiFfEsofThcGWopj8QwXN7Wqo4I8qX0bC7zJrao3UAFVwQ9ox80sWqeIXwJL4NoJs71x_v2GBPdFF74tyMptSL23oLv0c3PNREa2wkqxL1TFpg2VhwTFJRf=s25-no), auto;
}
I dont know what you exactly tried to achieve but this may help with what you try to do:
I basically used a keyframe to animate the other cursor and made the animation 2s so that it will turn back again to the state before.
body {
cursor: url(https://lh3.googleusercontent.com/BlETOnm98yPP5xCHbkFiFREFHNTQqucd_kFkfkYNKKnNohHvvnM7NTlLFq3rAukha0q-JEkouEgvfZnHkrhrzGIaps33RSJOuDV-_NiaPwSfn_cYbp5ayvFkYo4idwDkm-yb1G_jEwpY1zbrNtunux_oGFV-ADsdBVkK5qFqxj5OXMt3Qyw5GDkLgf5cdBHCK91go-7TkV8gT3zwbSWT8gi5tgFkY3UhyTM_X8E0FOU7uLOYBYDlTrEiIuIgqPEWOaj5MbH0j1j871KiLY65x4UsadJDzkpjT3mbfXgoMfDu4p3bE_I9a3Ck2MZq76RxKTH4iDHNwyz2hA0E0BXh2tsoq3mBQEH0h5ywIEDpNqMMQQ1HD33jfqX6TxZT48R6dGso6s4yGruWrMhn4CEwbvuNhOQYEO_r9e8WsIurKqU9bZ7Uiy3YdEtzgKG-sXHV5wJZQv8G0sr-utR9Cu8EzoYBHNdC2Yh-2eE8MAM0yS_15zKp-7igRo9RNhA_0TUkDgb8c4DQ4nC91VfylAA-elZKZtxDySI9U1ZCou1F8q42HJdD8A62CODQ2tlLJ3GMILtXQMM-T_JLhKzzg7gaTk8o9-E3pC5WVyh-yN9dSS-7sUqDBtUUF4bPWgg1WN2CbcJKXzDre_fBkw8hQ5Hzy_2Gp2LoMeSFB1c=s25-no), auto;
}
body:active {
animation: cursor 2s;
}
#keyframes cursor{
from{
}
to{
cursor: url(https://lh3.googleusercontent.com/pg5NgqvH-ljQhDjHXV3EHSdX9jYo3_DP2S5r72qH53KZgHjLXBWZb5exYINk7zGA0Xl05TJ4vRdj6Yx1M4gNwLy4jDCjZ_ihsnmO_qDIh5GSxdemoWioqsNjBuR2dyhHy72bToMwv4XRm8a9Rul2hkh9WgpcFRgA8UDPV_D_wCOvxVw6QN6bR472ZQdjCy0QKvHmuzCbuTFnrMCScHJf8OiqJcjhlk04yvaeigm_TJgM8AAgcqtiMJ1MYH5ebI9O34-8HxSPrME47y_9jEN_RSgTPbKD77izoxx531jwIkYbJ5_bSD6NMFDsrub1hlmzexjblGs9bkoC8rbINmCHuUo-zHZaRW3cWkpx-tI4-XjVIgEeoDcwaL0IDOZop2t9aUfbmZQxng-kYVlNzSRwfkWwjAqwJJsS_68T7e7-W_mF1qbdL2BVbihpf8Vy7-8uXYlvHZbiqeiFfEsofThcGWopj8QwXN7Wqo4I8qX0bC7zJrao3UAFVwQ9ox80sWqeIXwJL4NoJs71x_v2GBPdFF74tyMptSL23oLv0c3PNREa2wkqxL1TFpg2VhwTFJRf=s25-no), auto;
}
}
Maybe playing around with this will help you find your way to what you want to make.

Weird background glitch when using animation on the page in Chrome

If i have an animated element followed by another non-animated element, banding effect and various color shifting bugs appear in Chrome. Hard to see, but i recorded a video(if you zoom in on the page, the color shifts, easier to see): https://d26dzxoao6i3hh.cloudfront.net/items/1w1k2e3v0g04142U2A3H/Screen%20Recording%202017-10-30%20at%2011.35%20PM.mov
header {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #263238;
}
header a {
animation: scroll-down-anim 1s infinite;
}
#keyframes scroll-down-anim {
0% {
transform: translateY(0);
}
100% {
transform: translateY(10px);
}
}
<header>
Animated element
</header>
<p>if i remove this, the glitch disappears</p>
Any ideas how to fix this? If i remove the <p> element, it works. Also works on any other browser, like Safari.
Well this actually works for me, so I strongly suspect that it's just your graphics card or version of Chrome that's having issues.
However I would suggest that the reason it's happening is that the translate style forces Chrome to render using the GPU and having the P tag there is giving it a hard time.
If you were to force the P tag to use the same translation too then that might fix the issue for you, like this:
p {
transform: translateY(0);
}
it has nothing to do with chrome or your codes
Its your gpu ! specially if you have a m series Gpu (laptop to be exact)
so what happens is when you're using a ratio or a resolution higher or lower than your monitors native settings you put too much pressure on the gpu !
Update your graphics software by the os itself or bring the resolution back to its factory resolution

Rotate css animation glitchy in firefox

I am trying to rotate a div with this dead-simple code:
<!DOCTYPE html>
<html>
<head>
<style>
.spinner {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
border-bottom: 1px solid #f00;
animation: rotate-bottom 1s linear infinite;
}
#keyframes rotate-bottom {
from {
transform: rotateX(30deg) rotateY(-60deg) rotateZ(0deg);
}
to {
transform: rotateX(30deg) rotateY(-60deg) rotateZ(360deg);
}
}
</style>
</head>
<body>
<div class="spinner"></div>
</body>
</html>
I created a jsfiddle using the code above: http://jsfiddle.net/zg8vdyns/1/
Everything works fine on Chrome and Internet Explorer. A red curved line rotates in an endless, smooth and steady loop. However, firefox (39.0) seems to have issues rendering the animation (both the windows and linux build). First, the spinning line is much shorter than it should be. Second, the animation keeps faltering intermittently (it is not smooth). This looks like a firefox bug. Does anyone have a deeper insight into this issue?
Btw I know I should probably prefix 'animation' and 'keyframes' with '-moz-' but that is not the issue here.
Your issue is half-pixel/sub-pixel rendering. Playing around and changing border-bottom: 1px solid #f00; to border-bottom: 3px solid #f00; shows that animation is ok, but the rendering is very different from other browser engines... From another answer here of StackOverflow: Firefox CSS Animation Smoothing (sub-pixel smoothing)
The rendering engines for each browser is obviously different. Firefox does not implement an anti-aliasing effect on CSS animations. This does not inherently make it better or worse, it just depends on what you are animating. Linear transitions can appear undesirably blurred in Chrome for example.
That said it appears what you would like to achieve is to have an anti-aliased/sub-pixel smoothed transitions. We can't change the way the engine renders but we can manipulate the animation to appear softer to the end user.
But, differently from the approach provided by the answer in the link, in your scenario I think that there is a easier way to make the rendering more equivalent: http://jsfiddle.net/zg8vdyns/7/
Adding border-left: 1px solid rgba(255, 0, 0, 0.7); will kinda "force" the rendering of the half-pixels/sub-pixels that FireFox doesn't naturally...
Update:
#joshin855 also give a great answer below: adding the property background:rgba(255,255,255,0.01); will kinda "force" the rendering of the half-pixels/sub-pixels too. Your solution is very nice... It only have the disadvantage of a filled circle which depending on the scenario may not be suitable, but the line animation seems even more equivalent than in my solution... So, it also may be a good solution.
As far the line being a dot you can add background:white; or background:RGBA(255,255,255,.01); to the element which should fix the problem and make it look similar to other browsers. Sorry it's not a great answer just thought I would throw in my 2 cents.
.spinner {
width: 100px;
height: 100px;
margin: auto;
border-radius: 50%;
border-bottom: 1px solid #f00;
animation: rotate-bottom 1s linear infinite;
background:RGBA(255,255,255,.01);
}
http://jsfiddle.net/fqqko0uv/2/

Absolute background on pseudo-element ::before on IE 11

My problem is pretty weird. I have a background in a container::before, absolute-positioned and on every browser it works perfectly.
On IE 11 when I first load my page, my background only takes the width of my container (both sides are not visible). When I open my debugger or when I move the window the sides are revealed.
I tried this hack but it doesn't work.
.connexion-layout {
position: relative;
overflow: hidden;
}
.connexion-layout .container {
padding-top: 200px;
padding-bottom: 200px;
}
.connexion-layout .container::before {
content: " ";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
background: none no-repeat center center / cover;
}
#media screen and (min-width: 980px) {
.connexion-layout .container::before {
background-image: url("../../theme/images/connexion-bg-desktop.jpg?1433411383");
}
}
#media screen and (max-width: 979px) {
.connexion-layout .container::before {
background-image: url("../../theme/images/connexion-bg-mobile.jpg?1433411383");
}
}
Have you ever had something like this?
Adding position: relative; to the parent fixed this exact same bug for me.
When you say "it corrects itself when I resize the window or open the console" you are actually saying "forcing a browser repaint".
I haven't encountered this exact issue, but I did have a similar one with webfonts in Chrome a while back. It had to do with the order of loading.
So, based on that information, I'm going to guess that because the browser renders things in order, it's rendering the :before element first, then the parent element. However, the :before element's position is based upon the parent element (which it hasn't loaded yet) so it goes to the next available positioned element. When you resize, everything is loaded so it's fine.
There are two things I would try.
First, if you can, move it to the :after element. That may fix it. Since it is absolutely positioned, the :before vs :after shouldn't matter.
If that isn't possible, you can use a javascript/jquery repaint hack.
if($('html').hasClass('ie11')) {
$('.connexion-layout').hide(0, function(){$(this).show()});
}
Alternatively, you can try this in CSS. Load it at the bottom of your CSS. Again, this was meant for fonts but it should force a repaint regardless:
.ie11 body {
animation-duration: 0.1s;
animation-name: repaint;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-delay: 0.1s;
}
#-webkit-keyframes repaint {
from { opacity: 1; }
to { opacity: 1; }
}
Both the jquery and css assume you have a classname of ie11 on your <html> so that you don't unnecessarily repaint other browsers.
I don't have a PC at the moment, so please let me know if none of these work and I'll find my BrowserStack login and give it a whirl.

CSS3 3D bend perspective

CSS3 3D transforms + animations are great. I'm wondering if there is a way to make something bend.
This example flips the (paper) div but the animation looks stiff because, in real, when you flip paper, it bends a bit.
So any properties I overlooked or maybe a combination that makes it look like it bends?
div {
width: 90%;
height: 700px;
position: fixed;
left: 5%;
top: 0;
background-color: rgba(0,0,0,0.9);
-webkit-transform: perspective(1000);
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: top;
-webkit-animation: "page curl down" 1s ease-out forwards;
}
#-webkit-keyframes "page curl down" {
from {
-webkit-transform: rotate3D(1,0,0,180deg);
}
to {
-webkit-transform: rotate3D(0,0,1);
}
}
Example page curl with bending (image): http://numerosign.com/software/css3machine/#documentation
No. The best way is to use canvas then slide an image across, like this: http://www.20thingsilearned.com/. Here's a breakdown of how that works: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html
There are many limitations with that method, but it's the best I've seen.
Browser elements are currently limited to occupying a single flat plane. No matter what. I've wrestled with the idea of simulating curved <div>s for some time with no notable progress.
Using a transparent object with a border, border-radius and matrix3d can create "bends", but that's about as far as that goes. If you specify border-top only, with border-top-left-radius set, you can create a straight line with a curved end. Obviously, this is still part of a single flat plane, bending in the direction of its sibling 2-dimensional axis.
As soon as we begin thinking of bending your 2-dimensional element in the 3rd dimension it does not currently occupy, it literally becomes impossible without Canvas, WebGL, or other rendering engines.