I am trying to create a css transform for dropdown menu, but it does not work in firefox, this is the css code:
#-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
#keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
so is there special code for firefox transformation?
what is messing?
check this fiddle and see if it works for you.
http://jsfiddle.net/jybenjya/
it works fine for me. but the only thing you need to change is to add a time to the animation, either by adding "animation-duration:" or changing 'animation-name' to 'animation' and adding the time on the end as below
-webkit-animation: flipInX 3s;
animation: flipInX 3s;
just to be safe i usually include all the prefixes (moz for firefox)
-webkit-animation: flipInX 3s;
-moz-animation: flipInX 3s;
-o-animation: flipInX 3s;
animation: flipInX 3s;
-webkit-transform:
-moz-transform:
-ms-transform:
-o-transform:
transform:
etc.. but in my jsfiddle i didn't seem to need to include them.
Some configurations of Linux and older Windows machines (those without WebGL support) have trouble with 3D transforms and will treat them as if perspective was set as none.
Firefox on Windows incorrectly renders plugin content within no-op 3D transforms.
Related
I have a row of four icons I want to animate from right to left but I want the animation to pause at some point so the each icon will be visible one after the other in a circled mask.
I just can't figure how to pause in a middle of a keyframe. I want to know if it's possible and if it's possible without any Javascript
Thanks a lot
here is what I have now:
#keyframes move {
0% {
opacity: 0;
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
}
25% {
opacity: 1;
}
50% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
75% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.icons {
-webkit-animation: move 4s ease-in 2;
-moz-animation: move 4s ease-in 2;
animation: move 4s ease-in 2;
}
100% {
-webkit-transform: translateX(-200%);
-moz-transform: translateX(-200%);
-ms-transform: translateX(-200%);
-o-transform: translateX(-200%);
transform: translateX(-200%);
}
}
thanks in advance for your help
If you could provide your HTML and clarify a little more it may be easier to understand exactly what it is you're trying to achieve.
But if you're looking to just stagger your icons you can use :nth-child pseudo selector to put a unique delay on the different icons, and then adjust your animation %'s to keep the icons positioned for your desired time.
.icons:nth-child(2) {
animation-delay: 1s;
}
.icons:nth-child(3) {
animation-delay: 2s;
}
.icons:last-child {
animation-delay: 3s;
}
Here is a working example of staggering your animation using nth-child.
I could really use some help. On this site http://medicalaid.org I've been trying to fix it after another developer left. The last problem I've got is I can't get half of the webkit animations to load in IE10, all other browsers work fine and virtually all content divs have them. I've tried rewriting the css for example:
#-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
-moz-transform: scale(.3);
-o-transform: scale(.3);
-ms-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
-o-transform: scale(.9);
-ms-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
}
}
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn.go {
-webkit-animation-name: bounceIn;
-moz-animation-name: bounceIn;
-o-animation-name: bounceIn;
-ms-animation-name: bounceIn;
animation-name: bounceIn;
}
And I can't get anything to work, would be great if someone could take a look and help me out
Try to remove the unprefixed versions of your css:
#keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
You need to define more than just the animation-name; you'll also need to provide duration. Without this information the browser doesn't know how long the animation is to last. Below I'm stating that the entire animation should last 2 seconds:
.bounceIn.go {
animation: bounceIn 2s;
}
The resulting animation is presumably along the lines of what you were desiring. I defined styles for .go that would make it green, and rounded.
Im playing around with css3 translateY and i'm not abel to stop the animation at the end.
HTML:
<ul id="nav" class="nav-ctn">
<li>About</li>
<li>Projects</li>
<li>Media</li>
<li>Schedule</li>
<li>Contact</li>
</ul>
CSS:
.tr-up {
-moz-animation: tr-up 0.5s ease-in-out;
-o-animation: tr-up 0.5s ease-in-out;
-webkit-animation: tr-up 0.5s ease-in-out;
animation: tr-up 0.5s ease-in-out;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-moz-keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
#-webkit-keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
#keyframes tr-up {
from {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
}
to {
-moz-transform: translateY(-3px);
-ms-transform: translateY(-3px);
-o-transform: translateY(-3px);
-webkit-transform: translateY(-3px);
transform: translateY(-3px);
}
}
So far i have tried the solution form the following posts:
Stopping CSS3 KeyFrames Animation
Stop CSS3 animation jumping
Animation stop with css3
Stopping a CSS3 Animation on last frame
But non of them worked for me.
So what i am doing wrong?
HERES THE FIDDLE
Note: the tr-up class is dynamically added to the link characters.
Animations shouldn't work on inline elements so you need to change the default display property of the <span> tags to span{display:inline-block;} :
If you want to keep the underline on your menu items, you also need to add text-decoration:underline; to those span tags :
DEMO
Try the add iteration count
animation-iteration-count: 1;
It will be possible
Is there a way to stop constant firing of animation during initial hover? I'm trying to execute a css animation on an icon during hover. When I move the mouse over the element the icon bounces erratically until I stop moving the mouse and sometimes hangs during the animation. I understand that the animation is firing on the initial hover until I stop but I'd like the effect to fully run once and stop unless I hover off.
HTML
<div class="box">
<img src="imagename.png" />
</div>
CSS
a {display: block;}
.animate {
-webkit-animation-duration: .9s;
animation-duration: .9s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
}
20% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
#keyframes bounce {
0%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
10% {
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px);
}
20% {
-webkit-transform: translateY(10px);
-ms-transform: translateY(10px);
transform: translateY(10px);
}
30% {
-webkit-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
60% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.bounce:hover,
.bounce:focus {
-webkit-animation-name: bounce;
animation-name: bounce;
}
I've attached a jsfiddle of the result I'm getting.
http://jsfiddle.net/jordan911z/M3vZ2/
The animation-play-state property can pause or resume an animation. It accepts either:
running — the default; an animation plays as normal
paused — the animation is paused
#myelement:hover, #myelement:focus {
animation-play-state: paused;
}
See full tutorial on SitePoint.
Try add this to your CSS
animation-play-state: paused;
-webkit-animation-play-state: paused; /* Safari and Chrome */
Is it possible to create continious flip animation (I want icon flipping all the time) with pure CSS just like it's done for continious rotate animation?
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
Below is the script for flip animation using keyframes
#keyframes flip {
0% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
40% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
50% {
-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
80% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
}
.flip-animation {
-webkit-backface-visibility: visible;
-moz-backface-visibility: visible;
-ms-backface-visibility: visible;
backface-visibility: visible;
animation-name: flip;
animation-iteration-count: infinite;
transition-timing-function: linear;
animation-duration: 4.5s;
}
Here is the working Demo. http://jsfiddle.net/kheema/RCFM7/3/
There you go FIDDLE
Now you can play around with rotations on different axis.
for example,-webkit-transform:rotateX(360deg) rotateY(360deg); will rotate it on both x and y axis.
.center {
width:300px;
margin:auto;
margin-top:100px;
-webkit-perspective:250px;
perspective:250px;
}
.animation-rotate {
margin:auto;
-webkit-animation:coinflip 2s infinite linear;
animation:coinflip 2s infinite linear;
}
#-webkit-keyframes coinflip {
0% {
-webkit-transform:rotateY(-1deg);
}
100% {
-webkit-transform:rotateY(360deg);
}
}
#keyframes coinflip {
0% {
transform:rotateY(0deg);
}
100% {
transform:rotateY(360deg);
}
}