Currently working on my custom jquery plugin, which only requires jquery to run.
I don't want to have to include additional 3rd party jquery plugins.
I have a CSS3 animation running on my search button when clicked which works fine except for ie9. CSS is as follows :
.loader {
display: block;
width: 25px;
height: 25px;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: #fff;
outline:none;
-webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
font-size:0;
line-height:0
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
#keyframes spin {
0% {
-webkit-transform: rotate(0deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(0deg); /* IE 9 */
transform: rotate(0deg); /* Firefox 16+, IE 10+, Opera */
}
100% {
-webkit-transform: rotate(360deg); /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(360deg); /* IE 9 */
transform: rotate(360deg); /* Firefox 16+, IE 10+, Opera */
}
}
However it does not work in IE9, is a pure css solution I can do in IE9 to get this working ?
Animation, transition and transformations are not supported in IE9 or lower. There is a support for them from IE 10+, but even in this case there are a lot of issues users find when working with IE. The best thing to do, is to work with javascript. With javascript you can avoid the CSS3 animations and run your results much better even in IE.
For looking at browser compatibility for animations, transitions and transformations look at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility
Related
I have a div with a border-radius, which is rotated using keyframes.
Look at this Fiddle in firefox.
To replicate the problem: let the window size be less than the circle drawn on the page(both in height and width).
Now the problem is that the parent of the rotating div, i.e. body in this case, is resizing to a larger width at some points while the rotation is going on.
The same code in Chrome appears like the parent is resized to a greater width and height once and then it becomes stable.
My question is (even though I have rotated the circle within parent with radius = r): why does the parent width and height increases to greater than r while rotating the div?
.circle {
text-align: center;
color: yellow;
font-size: 21px;
height: 500px;
width: 500px;
background: red;
border-radius: 100%;
-webkit-animation: mymove 8s infinite;
/* Chrome, Safari, Opera */
animation: mymove 8s infinite;
}
body {}#-webkit-keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
/* Standard syntax */
#keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
<div class='circle'>
rotated
</div>
The problem:
This (odd) behavior is caused because , what you are rotating isn't really a circle, its actually a block(inline block), which has four corners, just a square.
When you define a border radius it is not changed to a circle, instead its borders become rounded, the element is still a square.
Now, before you rotate the div(circle), which actually is a square, its parent has a width & height equal its child(by default, since it is the only child of its parent in your case),
i.e say width=height= r.
now when you rotate the div, so you rotate a square, and thus when, the square comes diagonally horizontal( or vertical), it gets the maximum height & width.
i.e diagonal=√2r, thus, height = width= √2r i.e 1.41*r, this is surely 41% greater than the original radius of the circle.
Now, this is where the parent is increased in width and height.
The solution:
The solution is quite simple, wrap your circle with a parent, and let it hide the overflow. See this Fiddle
now this does not actually make the element itself circular, but will remove excessive, space outside the circle, which overflows the parent.
.parent {
width: 100%;
height: 100%;
overflow: hidden;
}
.circle {
text-align: center;
color: yellow;
font-size: 21px;
height: 500px;
width: 500px;
background: red;
border-radius: 100%;
-webkit-animation: mymove 8s infinite;
/* Chrome, Safari, Opera */
animation: mymove 8s infinite;
}
body {}#-webkit-keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
/* Standard syntax */
#keyframes mymove {
0% {
-ms-transform: rotate(0deg);
/* IE 9 */
-webkit-transform: rotate(0deg);
/* Chrome, Safari, Opera */
transform: rotate(0deg);
}
50% {
-ms-transform: rotate(180deg);
/* IE 9 */
-webkit-transform: rotate(180deg);
/* Chrome, Safari, Opera */
transform: rotate(180deg);
}
100% {
-ms-transform: rotate(360deg);
/* IE 9 */
-webkit-transform: rotate(360deg);
/* Chrome, Safari, Opera */
transform: rotate(360deg);
}
}
<div class='parent'>
<div class='circle'>
rotated
</div>
</div>
I am try to create a spinning image horizontally using purely CSS3.
This is a link to my page
http://www.csupomona.edu/~lannguyen/ISSM_WEB/html/
This is the css file:
www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css
the spin caller is at the top, and the implementation is at the bottom.
My issue is that the spinning that CSS3 provided is not full rotation. I would like some thing like this
http://davidwalsh.name/demo/css-cube.php (the depth cube example, but no need 3D).
can anyone help please.
thanks
Try This jsfiddle
<div class="cube">TRY</div>
CSS
.cube {
background-color: #5F9EA0;
border: 1px solid #CCCCCC;
height: 200px;
position: relative;
transform-style: preserve-3d;
-ms-transform-style:preserve-3d; /* IE 9 */
-webkit-transform-style:preserve-3d; /* Opera, Chrome, and Safari */
width: 200px;
}
#keyframes spin {
from { transform: rotateY(0);
-ms-transform:rotateY(0); /* IE 9 */
-webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
-webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}
.cube {
animation: spin 5s infinite linear;
-webkit-animation:spin 5s infinite linear;
-ms-animation:spin 5s infinite linear;
}
#-webkit-keyframes spin {
from { transform: rotateY(0);
-ms-transform:rotateY(0); /* IE 9 */
-webkit-transform:rotateY(0); /* Opera, Chrome, and Safari */
}
to { transform: rotateY(360deg);
-ms-transform:rotateY(360deg); /* IE 9 */
-webkit-transform:rotateY(360deg); /* Opera, Chrome, and Safari */
}
}
Im trying to get this code to work in IE9 and Firefox. It works perfectly fine in chrome
http://jsfiddle.net/THSdP/1/
#-webkit-keyframes spin {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
}
#rsSpinner{
-webkit-animation-name: spin;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 40s;
}
The code only shows the code for Chrome, and it works in there, but I cant seem to get the other prefix sets to work in IE and Firefox.
You haven't defined the animation function for firefox, only for webkit and ms. That's why it's not working in Firefox and IE.
#-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
Another advice is to put the prefix free at the bottom of the definition.
Here is the working code: http://jsfiddle.net/THSdP/5/
Add this for IE
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
I found this useful link which explains rotation in IE9
CSS3 transform: rotate; in IE9
unfortunately using either of these does not work
.mark.festival:hover{
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
I have seen in various places that both these rules work for IE9 though mostly I am reading that you need the -ms prefix
http://www.wanderfest.com is the link if you want to check it
the site is not in quirks mode as suggested here
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/2567faea-fcea-4ddf-9116-1e2c703ee2e7/
That support on caniuse.com has a caveat: you need to use the MS's filter: This translator will convert CSS3 transforms to MS matrices for filters: http://www.useragentman.com/IETransformsTranslator/
Example:
#transformedObject {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
/* IE8+ - must be on one line, unfortunately */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=0,
M21=0,
M22=1,
SizingMethod='auto expand');
}
I have created a div and in that div there are three other elements(canvas). I have applied rotation to that div and it perfectly applies to inner elements too in firefox and chrome. But in I.E the rotation is not being applied on inner elements. Is there some special way for i.e?
Here is code for rotaion,
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg); /* Safari and Chrome */
-o-transform: rotate(-5deg); /* Opera */
-moz-transform: rotate(-5deg); /* Firefox */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.992546151641322, M12=0.12186934340514761, M21=-0.12186934340514761, M22=0.992546151641322, SizingMethod='auto expand')";