I am working on a new website, but when my friend tested it on firefox one of the features was not working.
We found out the css is not working in firefox but it does work in Chrome.
The whole code: https://jsfiddle.net/wvkL6d2b/
We tried
-webkit- and -ms-
#separator{ width: 10px!important; max-width: 60px!important; height: 10px; background:red;}
#keyframes in-out {
from { width: 10px;
}
10%, 100% {
width: 60px;
}
to{ width: 60px; }
}
#separator {
animation-name: in-out;
animation-duration: 8s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-delay: 2s;
}
I am trying to get it to work on both browsers
There are so many mistakes in the CSS properties you have written. Please find the updated code here in fiddle.
These are supposed to be properties to use.
#separator {
height: 10px;
background: red;
-webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
animation: mymove 5s infinite;
}
#-webkit-keyframes mymove {
0% { width: 10px; }
100% { width: 100px; }
}
/* Standard syntax */
#keyframes mymove {
0% { width: 10px; }
100% { width: 100px; }
}
It's not working because you have declared the wrong property.
The declaration you need for firefox is just animation. Only Chrome and Safari need the -webkit- prefix for this CSS3 effect.
So your code would be:
-webkit-animation:slideshow 21s infinite;
animation:slideshow 21s infinite;
Ref:
http://www.w3schools.com/css3/css3_animations.asp
Related
Hi I am trying to implement css animation, i have implemented #keyframes
but my animation is not applied to my div.
my keyframe is
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Please tell me where i am wrong.
You have done everything right but you haven't created the class which will implement animation
Create two css class as follows
.fadeIn {
animation-name: fadeIn;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
animation-name is the name of your keyframes in your example i.e. fadeIn.
Now use those two class in your div where ever you want to implement.
Hope this helps.
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
}
#keyframes mymove {
0% {top: 0px;opacity:0;}
100% {top: 100px;opacity:1;}
}
</style>
<div></div>
I've been trying to blink two colors, using the following CSS rules but the colors just ends up blending.
Here is the jsfiddle: http://jsfiddle.net/1kyba3rd/
Here are the CSS rules:
<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;
/* Chrome, Safari, Opera */
-webkit-animation-name: flash-colors;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: steps(2, start);
-webkit-animation-iteration-count: infinite;
/* Standard Syntax */
animation-name: flash-colors;
animation-duration: 1s;
animation-timing-function: steps(2, start);
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
/* Standard syntax */
#keyframes flash-colors {
0% {
background-color: white;
}
100% {
background-color: yellow;
}
}
</style>
the blinking is not working properly because you have set background-color:yellow at the end of the animation (100%) and the background-color:white at the beginning, set first one at 50% so that the animation works as expected - demo
Trying to have a div expand on page load:
#box {
width: 10px; height: 10px;
-moz-animation: expandwidth 1s forwards;
animation: expandwidth 1s forwards;
}
while the following animation works as expected in firefox:
#-moz-keyframes expandwidth{
100% {width: 60%; min-width: 800px;}
}
this won't quite work in IE 11:
#keyframes expandwidth{
100% {width: 60%; min-width: 800px;}
}
in fact, while it does expand to 60% length, it does not take into account the min-width requirement, which can easily be seen as I shrink the browser size horizontally. In firefox however, it does not shrink under 800px, as intended. Am I doing something wrong? I cannot seem to find anything regarding min-width being unsupported in IE animations. Also note that I am looking for a css fix only. Thanks.
Edit: see http://jsfiddle.net/qyan20k9/
works for me in FFX 31.0 but not in IE 11
I've tested this in IE11, Chrome 38 (64bit)& FF31 and it seems to work is you establish a min-width to start with.
JSfiddle Demo
#box {
width: 10px;
height: 30px;
min-width:10px; /* here */
-moz-animation: expandwidth 1s forwards;
-webkit-animation: expandwidth 1s forwards;
animation: expandwidth 1s forwards;
background: grey;
}
#-webkit-keyframes expandwidth {
100% {
width: 60%;
min-width: 800px;
}
}
#-moz-keyframes expandwidth {
100% {
width: 60%;
min-width: 800px;
}
}
#keyframes expandwidth {
100% {
width: 60%;
min-width: 800px;
}
}
According to https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode, the animation-fill-mode: none; should not apply style of the first frame to the element before the animation starts. However, animation-fill-mode: backwards should.
But in this demo of the below code, it seems like none is doing the job backwards should. Why?
/* I have autoprefixer enabled */
div {
width: 100px;
height: 100px;
background-color: red;
transform: translate(0, 0);
animation: someAnimation 1s linear 1s;
animation-fill-mode: none;
-webkit-animation-fill-mode: none;
}
#keyframes someAnimation {
0% {
transform: translate(50px, 50px);
}
100% {
transform: translate(100px, 100px);
}
}
You misspelled animation-fill-mode in the first statement
You don't have a -webkit- prefix for the animation and transition properties nor do you enable prefix free, so webkit is not being served
Once you fix those they work differently as they should
I'm working on a CSS3 Keyframe Animation with a skew() transform. I was able to achieve the result I was looking for in Safari 6. However, when I view the page on another Webkit browser, Chrome I am getting a different animation result.
Here is my code:
HTML
<div id="test">
webkit animation test
</div>
CSS
#test {
position: absolute;
left: 200px;
top: 0px;
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.5);
-webkit-animation-name: testBox;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate; /* alternate, normal */
-webkit-animation-play-state: running;
}
#-webkit-keyframes testBox /* Safari and Chrome */ {
0% {
-webkit-transform: skew(70deg,0deg);
}
100% {
-webkit-transform: skew(-70deg,0deg);
}
}
Anyone else have this issue?