I have an image then I have applied the following style rules to:
.spinner {
position: absolute;
width: 600px;
height: 600px;
-webkit-transform-origin: 50% 50%;
-webkit-animation:spin 14s linear infinite;
animation:spin 14s linear infinite;
}
#-webkit-keyframes spin { 100% {-webkit-transform: rotate(-360deg);} }
#keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg);}}
In my IDE, this works perfectly fine. I then published a page to the web about 6 months ago. I loaded the page, and it worked as expected. Actually things were good, no problems or anything for all those 6 months. Then a few weeks ago I noticed a strange development -- the rotation behavior changed. I was bewildered because this page, and indeed, the entire site is static. There have been no updates to the master css file or anything for that matter that could possibly interfere with the style rules that I posted above.
Specifically what changed was instead of the image rotating in place at its center, the image now rotates about its original center position. The easiest way to imagine the change in behavior is comparing it to a clock. The center of the clock doesn't move as the hands rotate. However the minute hand and hour hands do (namely the ends of the hands that point to the time). That is what my image is doing now. It's now moving across the x and y dimensions in pixel space when it is not supposed to. It's supposed to rotate in place, staying still. There should be no movement in x or y.
I said to myself, "well this is just impossible," and thought the problem would go away by itself just as mysteriously as it came. Unfortunately it persisted for a few weeks, so I feel compelled to deal with it. Despite the absence of style rule clashes, I added !important to all the style rules that I posted above for the .spinner class as well as the #keyframes out of scope as well. This didn't help.
Now I'm starting to think it could be a browser issue? I'm using google chrome; only google chrome, I didn't include any -moz, I won't need to. My only guess is that the browser updated itself and started handling these animations differently?
Question: Why would animation:spin change spinning behavior? Is this symptomatic of some other looming issue? Is there anything I can do to make my rules more robust, other than add !important?
Chrome version: 64.0.3282.186
Update After what seemed like a billion trial and errors, I found that by setting:
.spinner {
-webkit-transform-origin: 15% 0%;
}
The image started to spin in place like it used to. Still begs the question what happened...
I examined the image to see if it's dimensions had changed somehow, but things look normal.
A bit late at 2021.5 But may be helpful for somebody. In my case it was because I removed :
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
and then caught that. All the followings were untouched ,the css were:
#overlay {
display: none;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
position: absolute;
z-index: 99999;
}
.myblock {
display: inline-block;
vertical-align: center;
horiz-align: center;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
transform-origin: center center;
-moz-transform-origin: center;
width: auto;
height: auto;
}
#-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
#keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
html:
<body>
<div id="overlay">
<div class="myblock" style="background-color: transparent; background-blend-mode: unset">
<img src="/images/corona.png" width="150px" height="150px" style="background-blend-mode: unset"
alt="this slowpoke moves"/>
</div>
</div>
....//other divs
</div>
</body>
the js part:
function spinIt(gironPrm) {
if (gironPrm === true)
$("#overlay").css('display', 'flex')
else
$("#overlay").css('display', 'none')
}
I have no idea no care of its science and no time to figure out why it happened to me,
but its so as it is
Related
I've made a slideshow that works by putting three inline blocks next to each other (all with the same background-image) within a slideshow container, and using translateX to move that container 33% of the way to the left/right, before looping. The three inline blocks pretty much ensures it will always look continuous and you never see a seam at the each of your screen.
The slideshow is placed into another container of its own, typical width, and overflow: hidden is used to crop the long photo strip and prevent it from stretching your browser window.
#container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.slideshow {
position: absolute;
z-index: 5;
top: 0;
width: auto;
height: 100%;
overflow: hidden;
white-space: nowrap;
}
.slide {
display: inline-block;
height: 100%;
}
#about-slideshow {
right: 0;
-webkit-animation: slideshow-right 10s linear infinite;
animation: slideshow-right 10s linear infinite;
}
#about-slideshow .slide {
width: 964px;
background: url('http://simplegrid.cochranesupply.com/images/slideshow-a.jpg') 0 0 repeat-x;
background-size: 101%;
}
/* the animation */
#-webkit-keyframes slideshow-right {
from {
-webkit-transform: translateX(0);
}
to {
-webkit-transform: translateX(33.33333333333%);
}
}
#keyframes slideshow-right {
from {
transform: translateX(0);
}
to {
transform: translateX(33.33333333333%);
}
}
My problem: After looking at it thoroughly on an iPhone 5S and iPhone 6 Plus, it seems to not start sometimes. It'll just sit there. Maybe glitch out after a while. If I continue to refresh, it will sometimes run, and sometimes not. Seems completely inconsistent.
Any ideas on what could be causing this? Seems pretty simple.
Here's a CodePen that I've confirmed displays the issue on iOS Safari: http://codepen.io/arickle/pen/pvGJBM
Here's a full screen view to pull up on an iOS device for testing (remember, keep refreshing until it stops--you don't have to refresh particularly fast or anything): http://codepen.io/arickle/full/pvGJBM/
Well, I appear to have stumbled upon a workaround at least. Apparently, if mobile Safari hiccups on anything during load, or can't keep up, or something, it won't start the animation. My solution was simply to delay the animation by 0.1s. This gives the browser enough time to get everything loaded and then start the animation, every time.
-webkit-animation: slideshow-right 10s 0.1s linear infinite;
Silly.
I am trying to create an animation using css the idea is that when hovered the missile falls down(check fiddle link at bottom) rotating so that it will stay almost perpendicular
the problem is that there is no continuity in the animation there are a few pauses i think my problem is here
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
}
#-webkit-keyframes anim2{
0%{margin-left:280px;}
50%{margin-left:100px;}
60%{margin-top:90px;transform:rotate(200deg);}
85%{margin-left:80px; }
100%{margin-left:70px; margin-top:200px; transform:rotate(90deg);}
}
http://jsfiddle.net/tuuqhgk3/2/
.boy:hover~ .missile{
-webkit-animation:anim2 10s;
-webkit-animation-timing-function: linear;
}
This should give you a continuous animation speed, rather than the easing (pauses) that is set by default.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
Try updating your anim2 to this:
#-webkit-keyframes anim2 {
0% {margin-left: 280px; transform: rotate(220deg);}
15% {margin-top: 80px;}
100% {margin-left: 100px; margin-top: 200px; transform: rotate(130deg);}
}
To get smooth animation, you need to calculate exact distances (margin-top, margin-left) that need to change in each % step. I don't think you need to add too many steps in this case.
Also, if you want to repeat animation, you can add "-webkit-animation-iteration-count: infinite;" to your hover .fire/.missile (fire won't disappear, for example).
I'm able to run my script fine within JSFiddle, but when I try to run within Chrome or IE11 on my website, there is no response to hovering. Anybody have any advice? I know I'm missing something obvious here.
It's saved as an HTML webpage when I try to run within my website, and the CSS is (for now) on the same document as the HTML.
#backgroundBox{
z-index:-1;
left:50%;
top:50%;
background-color:#cdcba9;
width:400px;
height:400px;
position:absolute;
margin-left:-200px;
margin-top:-200px;
}
#backgroundBox:hover div{
-webkit-animation-play-state:running;
animation-play-state:running;}
.ball {
z-index:1;
border: 20px solid #356db4;
border-top: 20px solid rgba(0,0,0,0);
border-left: 20px solid rgba(0,0,0,0);
border-radius: 400px;
width: 400px;
height: 400px;
margin: 0 auto;
position:relative;
top:-295px;
left:-20px;
-moz-animation: spin 3s infinite linear;
-webkit-animation: spin 3s infinite linear;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
http://jsfiddle.net/g5zQ8/3/
Thank you for your help!
Try doing a difference check on your page source and Vorenus's page source or run your page source through the W3C validator. I saved it and it works fine locally in Chrome, even when not using a proper HTML5 doctype.
This seems to work fine when I translate it to a standalone file, see:
http://www.saltcollective.com/stuff/bike.html
Is it possible that you're borking the HTML/CSS somehow?
I converted the JSFiddle to a single file (http://jsbin.com/fanesihi/1/edit) and it worked fine.
If you are implementing this into a website, and it isn't working than it is one of two things:
1) Incorrect implementation. Perhaps some of the CSS wasn't copied or something of that nature.
2) Other CSS within your site is overriding the animation CSS class.
In order to truly debug the issue, I'd need to see an example of it not working.
As a side note, remember to include non-browser prefixed version of your keyframe animations. Also, your trailing semicolons within the keyframe blocks CAN cause issue strange bugs further down in the stylesheet (just saw that issue on here a couple days ago)...it would be best to remove them:
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes spinoff {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
So I want to make a pop-up book effect but in 2D only. (so NOT like the beercamp page).
Ideal results:
bottom of img stays in the same position
img starts invisible then is popped up (imagine it lying on its back, then being lifted up till it is vertical)
Item should not appear too (if possible) compressed
I've read into CSS animations, the closest animation I can find is
transform: rotateX(xdeg);
So I produced this to test it out:
<!doctype html>
<style type="text/css">
#popup
{
transform: rotateX(90deg);
animation-delay: 2s;
animation-duration: 3s;
animation-name: popupanim;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#keyframes popupanim
{
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
</style>
<body>
<img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/>
</body>
The problem with this is that the bottom level of the image changes, and that the image is obviously compressed.
How could I improve this to meet my needs?
(also as a side not rotate3d(xdeg, ydeg, zdeg) does not produce any output, why?)
Add a container element and use the transform-origin property to make it pivot properly:
#container {
display: inline-block;
perspective: 600px; /* Tweak this */
}
#popup {
transform: rotateX(90deg);
transform-origin: bottom;
}
Demo: http://jsfiddle.net/BEy9f/3/
You need to use a parent element (#container) to make the perspective work properly. Also, if the #popup isn't in the exact center of the element (which is why I put display: inline-block in there), it'll appear off-center in the animation.
Chrome supports 3D transformations as well, so you can add support by using the -webkit- prefix.
I'm trying to make this star spin around it's centre. For now it spins around some other point.
#question {
font-size: 3em;
animation: 1s linear 0s normal none infinite spin;
display: block;
width: 0;
}
#keyframes spin {
from { transform: rotate(00deg); }
to { transform: rotate(360deg); }
}
<div id="testWrapper"><span id="question">☆</span></div>
How can I fix it so the star spins around its centre?
The default transform-origin is 50% 50% which is what you want.
But you set the width to 0, and so it rotates around 0 in the horizontal direction.
You need to make your element be as large as the contents and also make the contents centered inside it.
In your example just setting the element to inline-block and removing the width:0 will almost fix it.