I have this fiddle http://jsfiddle.net/Dgy2Q/3/
#LeftDoor{
position: absolute;
height: 100%;
width:50%;
z-index: 30;
background-color: blue;
left:0px;
-webkit-animation: leftDoorOpen 1s ease 1s;
-webkit-animation-fill-mode: forwards;
-moz-animation: leftDoorOpen 4s ease 4s;
-moz-animation-fill-mode: forwards;
}
#-webkit-keyframes leftDoorOpen {
from {
-webkit-transform: perspective(300) rotateY(0deg);
-webkit-transform-origin: 0% 0%;
}
to {
-webkit-transform: perspective(300) rotateY(90deg);
-webkit-transform-origin: 0% 0%;
}
}
#-moz-keyframes leftDoorOpen {
from {
-moz-transform: perspective(300) rotateY(0deg);
-moz-transform-origin: 0% 0%;
}
to {
-moz-transform: perspective(300) rotateY(90deg);
-moz-transform-origin: 0% 0%;
}
}
that works great in chrome. It doesn't work in firefox, I can't see what I am doing wrong??? Can anyone see what I have done wrong?
thanks
have amended the fiddle but still no joy? anything else?
http://jsfiddle.net/Dgy2Q/10/
You have errors in the perspective function. Its parameter should be a length, with a unit. Change the 300 to 300px and it will work in Firefox.
http://jsfiddle.net/MrLister/Dgy2Q/6/
The result is not identical though. Not sure what causes that, if it can be corrected with CSS or if it's simply different implementations in the browsers.
Related
I am trying to create an animation of a balloon flying. All is weel in all modern browsers except IE11.
I am using translateX and translateY without any problem but scale is causing the image to become blurry.
#media (min-width: 1100px) {
.balloon-outer,
.balloon-inner,
.balloon {
height: 100%;
position: absolute;
width: 100%;
bottom: 0;
right: 0;
animation-duration: 60s;
animation-delay: 0;
animation-iteration-count: infinite;
animation-direction: normal;
will-change: transform;
pointer-events: none;
}
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
}
.balloon {
transform-origin: 50% 50%;
animation-name: travel-y;
animation-timing-function: ease-out;
transform: translateY(90%);
}
.balloon-inner {background:url("https://www.inty.com/wp-content/uploads/balloon.png") no-repeat scroll 100% 100% / auto 40%;
transform-origin: 100% 100%;
animation-name: scale;
animation-timing-function: linear;
transform: scale(3);
}
}
#keyframes scale {
0% {transform: scale(3);}
80% {transform: scale(0);}
100% {transform: scale(0);}
}
#keyframes travel-x {
0% {transform: translateX(-10%);}
80% {transform:translateX(-45%);}
100% {transform:translateX(-45%);}
}
#keyframes travel-y {
0% {transform: translateY(120%);}
80% {transform:translateY(-70%);}
100% {transform:translateY(-70%);}
}
<div class="balloon-outer"><div class="balloon"><div class="balloon-inner"></div></div></div>
http://codepen.io/rachelreveley/pen/xdLGEO
I have tried this trick which I have seen in several places but it made no difference.
-webkit-backface-visibility: hidden;
-ms-transform: translateZ(0); /* IE 9 */
-webkit-transform: translateZ(0); /* Chrome, Safari, Opera */
transform: translateZ(0);
Try changing all your translateX and translateY to translate3d like:
#keyframes travel-x {
0% {transform: translate3d(-10%,0,0);}
80% {transform:translate3d(-45%,0,0);}
100% {transform:translate3d(-45%,0,0);}
}
#keyframes travel-y {
0% {transform: translate3d(0,120%,0);}
80% {transform:translate3d(0,-70%,0);}
100% {transform:translate3d(0,-70%,0);}
}
do the same everywhere you have been using translates in your example. translate3d enables hardware acceleration which will help with animations.
you can see this post for more info.
You can use a fallback to IE-11 with the vendor prefix "-ms-transform".
for example:
.balloon-outer {overflow-y: hidden;
transform-origin: 50% 50%;
animation-name: travel-x;
animation-timing-function: ease-in;
transform: translateX(-20%);
-ms-transform: translateX(-20%);
}
See the answer here.
CSS3 transform:scale in IE
I tried and wrote this code but it have a problem, first issue is text inside div will be fuzzy (fluffy)! and second scale animation not play softly, all i want is play animation softly, scale once then rotate infinite on hover.
#-webkit-keyframes socialspin {
from {
-webkit-transform: scale(2) rotate(0deg);
-moz-transform: scale(2)rotate(0deg);
-ms-transform: scale(2) rotate(0deg);
-o-transform: scale(2) rotate(0deg);
transform: scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotateY(90deg);
-moz-transform: scale(2) rotateY(90deg);
-ms-transform: scale(2) rotateY(90deg);
-o-transform: scale(2) rotateY(90deg);
transform: scale(2) rotateY(90deg);
}
}
Here is JSFiddle Demo
The best way to have a smooth result is not to have a zoom in (scale=2) but a zoom out (scale=0.5), but of course in the opposite state.
And I don't believe that what you want can be achieved with a single animation. I have used 2 elements, and one handles the rotation and the other the scale
#container {
width: 400px;
height: 400px;
}
#container:hover {
-webkit-animation: socialspin 5s linear 0s infinite alternate;
}
#-webkit-keyframes socialspin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotateY(90deg); }
}
#keyframes socialspin {
from { transform: rotate(0deg); }
to { transform: rotateY(90deg); }
}
#base {
width: 400px;
height: 400px;
background: yellow;
transform: scale(0.5);
transition: transform 5s;
transform-origin: top left;
font-size: 200%;
}
#container:hover #base {
transform: scale(1);
}
<div id="container">
<div id="base">
<br>
<br>
<br>
HELLLLOOOO!!!
</div>
</div>
We cannot, as of yet, completely make the font clear. This is because you are using an animation. If there was no spinning, the text would not be fuzzy. However, we can try using several font smoothing properties to try and combat this. None of them are very good but they do improve legibility slightly.
Regardless, here is the fix for the second part:
I found a hack. This will remove the blur during the rotation but not during the scaling up.
.square {
width:100px;
height: 100px;
background-color:black;
margin: 50px;
}
p {
-webkit-font-smoothing: antialiased;
color:white;
text-align: center;
padding-top: 35px;
}
.square:hover {
-webkit-animation: scale 1s linear 0s 1, spin 1s linear 1s infinite alternate;
}
.square:hover p{
-webkit-animation: scaletext 1s linear 0s 1;
}
#-webkit-keyframes scale {
from {transform: scale(1); }
to{transform: scale(2);}
}
#-webkit-keyframes scaletext {
from {transform: scale(1); }
to{transform: scale(1);}
}
#-webkit-keyframes spin {
from {transform: rotateY(0deg) scale(2) ;}
to {transform: rotateY(90deg) scale(2);}
}
<div class="square">
<p>Some text</p>
</div>
(I removed the prefixes to condense the answer)
here is the example and the point is first to describe all features in the main div as defaults because animation uses main elements rules to calculate time etc.
and second point here you used 90 degrees to turn but a complete turning back can be done by 180 degrees which is the angle of a line
here is the code
--update--
here is the exxample you can see scale animates the problem was in your animation scaling started from 2 and ended by 2 so there was no animation for that
--update--
here we go if you run transition first and by the time while transition is running make animation wait by delay time of animation it works fine you can see here
div {
width: 200px;
height: 200px;
background: yellow;
-webkit-transform:scale(1) rotate(0);
transform:scale(1) rotate(0);
margin-left:200px;
margin-top:50px;
transition:-webkit-transform .5s linear;
transition:transform .5s linear;
}
div:hover {
-webkit-transform:scale(2) rotate(0);
transform:scale(2) rotate(0);
-webkit-animation: socialspin 5s linear .5s infinite alternate;
-moz-animation: socialspin 5s linear .5s infinite alternate;
}
#-webkit-keyframes socialspin {
from {
-webkit-transform: scale(2) rotate(0deg);
transform:scale(2) rotate(0deg);
}
to {
-webkit-transform: scale(2) rotateY(180deg);
transform: scale(2) rotateY(180deg);
}
}
the following animation doesn't even load in Safari browser (but works nicely in Chrome, Mozilla, IE, Opera)
http://codepen.io/anon/pen/utdIK
Any idea how to fix it? This problem looks similar, but it didn't fit to my problem.
CSS3 animation not working in safari
HTML:
<div id="spinner-2">
<div class="slices bar">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="maskWheel"></div>
</div>
CSS:
#spinner-2 {
width: 45px;
height: 45px;
-webkit-border-radius: 100px;
-moz-border-radius: 50%;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
-webkit-animation: spin .8s infinite steps(8);
-moz-animation: spin .8s infinite steps(8);
-ms-animation: spin .8s infinite steps(8);
-o-animation: spin .8s infinite steps(8);
animation: spin .8s infinite steps(8);
}
.slices {
width: 45px;
height: 45px;
position: relative;
transform-origin: right bottom;
}
.slices.bar div {
width: 100%;
height: 100%;
position: absolute;
-webkit-border-radius: 100px;
-moz-border-radius: 50%;
border-radius: 50%;
background: -webkit-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: -moz-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: -o-linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background: linear-gradient(45deg, #cdcdcd 43%, transparent 43%) 0 0;
background-repeat: no-repeat;
background-size: 50% 50%}
#-webkit-keyframes spin {
to {
transform: rotate(1turn);
}
}#-moz-keyframes spin {
to {
transform: rotate(1turn);
}
}#-ms-keyframes spin {
to {
transform: rotate(1turn);
}
}#keyframes spin {
to {
transform: rotate(1turn);
}
}.slices.bar div:nth-child(1) {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
.slices.bar div:nth-child(2) {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.slices.bar div:nth-child(3) {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.slices.bar div:nth-child(4) {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
.slices.bar div:nth-child(5) {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.slices.bar div:nth-child(6) {
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
.slices.bar div:nth-child(7) {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
.slices.bar div:nth-child(8) {
-webkit-transform: rotate(315deg);
transform: rotate(315deg);
}
.slices.bar div:nth-child(3) {
background: linear-gradient(45deg, #ed3000 43%, transparent 43%) 0 0;
background-repeat: no-repeat;
background-size: 50% 50%}
As Dan stated in his answer, the -webkit- prefix was missing.
One issue for Safari 5 is that shortend properties will not be interpreted by the browser.
You need to specify each single animation property in full.
-webkit-animation-name: spin;
-webkit-animation-duration: 8s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: steps(8);
-moz-animation-name: spin;
-moz-animation-duration: 8s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(8);
-ms-animation-name: spin;
-ms-animation-duration: 8s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: steps(8);
-o-animation-name: spin;
-o-animation-duration: 8s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: steps(8);
animation-name: spin;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: steps(8);
If still does not work you can try to remove the to and add the percentage and change the 1turn unit and add the default one in degrees.
#-webkit-keyframes spin {
100% {
transform: rotate(360deg);
}
}#-moz-keyframes spin {
100% {
transform: rotate(360deg);
}
}#-ms-keyframes spin {
100% {
transform: rotate(360deg);
}
}#keyframes spin {
100% {
transform: rotate(360deg);
}
DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/2/ with no 'to' and '1turn'
DEMO http://jsfiddle.net/a_incarnati/q0v1wgc8/3/
Let me know if it works in Safari 5.0.5
The -webkit- prefix was missing from your webkit specific keyframe.
#-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
}
Here's an updated Codepen
Tested in Safari 7.
I would just like to add that the element should be display:block type in Safari (display: inline works in chrome only ...)
I created some keyframes animation to animate div on mouse hover in pure css3.
It works great in every browsers (google chrome, safari, IE, opera) execpted in FIREFOX!
I really don't know why it didn't works only in firefox. The animation won't works on mouseover but works on load....
Here a css example of keyframe :
#-webkit-keyframes swing {
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
20% { -webkit-transform: rotate(15deg); }
40% { -webkit-transform: rotate(-10deg); }
60% { -webkit-transform: rotate(5deg); }
80% { -webkit-transform: rotate(-5deg); }
100% { -webkit-transform: rotate(0deg); }
}
#-moz-keyframes swing {
20% { -moz-transform: rotate(15deg); }
40% { -moz-transform: rotate(-10deg); }
60% { -moz-transform: rotate(5deg); }
80% { -moz-transform: rotate(-5deg); }
100% { -moz-transform: rotate(0deg); }
}
#-o-keyframes swing {
20% { -o-transform: rotate(15deg); }
40% { -o-transform: rotate(-10deg); }
60% { -o-transform: rotate(5deg); }
80% { -o-transform: rotate(-5deg); }
100% { -o-transform: rotate(0deg); }
}
#keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.col:hover .swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 1s linear;
-moz-animation: swing 1s linear;
-o-animation: swing 1s linear;
animation: swing 1s linear;
}
.swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 1s linear 1s;
-moz-animation: swing 1s linear 1s;
-o-animation: swing 1s linear 1s;
animation: swing 1s linear 1s;
}
.col,
.th-icon {
position: relative;
margin: 40px 0 0 100px;
width: 200px;
height: 200px;
}
i.swing {
display: block;
width: 200px;
height: 200px;
background: grey;
}
And the fiddle: http://jsfiddle.net/ktxDp/1/
May be Firefox doesn't allow same animation twice.
It worked when I called the animation only once. Working Demo
.col:hover .swing {
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-animation: swing 1s linear;
-moz-animation: swing 1s linear;
-o-animation: swing 1s linear;
animation: swing 1s linear;
}
I'm relatively new to CSS3 transform and keyframe animations so tend to stick to CSS generators or ripping other examples. I have modified the example shown here for my own purposes which works great in Chrome but not in FF or IE - http://webbb.be/blog/making-a-swinging-effect-with-css3-animations/.
See my example below (js fiddle included), in essence this is a swing effect on hover using perspective but the perspective doesn't seem to work in FF and IE.. I have only added the -moz- pre fix to the example below... any ideas?
a { display: block;
float:left;
text-indent: -999px;
overflow: hidden;
height: 100px;
width: 100px;
background: red;
cursor: pointer;
}
.perspective {
position: relative;
-webkit-perspective: 350;
-moz-perspective: 350;
width: 100px;
height: 100px;
}
.perspective .swing {
position: relative;
z-index:1;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
}
a.swing:hover {
-webkit-transform-origin: top;
-moz-transform-origin: top;
-webkit-animation: balance 1.5s ease-in-out 110ms 1 alternate;
-moz-animation: balance 1.5s ease-in-out 110ms 1 alternate;
}
#-webkit-keyframes balance {
25% { -webkit-transform: rotateX(-60deg); }
45% { -webkit-transform: rotateX(50deg); }
69% { -webkit-transform: rotateX(-30deg); }
90% { -webkit-transform: rotateX(30deg); }
100% { -webkit-transform: rotateX(0deg);}
}
#-moz-keyframes balance {
25% { -moz-transform: rotateX(-60deg); }
45% { -moz-transform: rotateX(50deg); }
69% { -moz-transform: rotateX(-30deg); }
90% { -moz-transform: rotateX(30deg); }
100% { -moz-transform: rotateX(0deg);}
}
http://jsfiddle.net/7ejF7/1/
You need to add px values for perspective to work on non-webkit browsers.
-moz-perspective: 350px;
http://jsfiddle.net/mZMGd/
Try to add the statement for none -webkit- or -moz- browsers.
i haven't tried it but it could be the solution.
transform-origin: top;
animation: balance 1.5s ease-in-out 110ms 1 alternate;
#keyframes balance {
25% { transform: rotateX(-60deg);}
45% { transform: rotateX(50deg); }
69% { transform: rotateX(-30deg); }
90% { transform: rotateX(30deg); }
100% { transform: rotateX(0deg);}
}
TJL