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?
Related
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
I'm fading in two objects on a very simple page. First the logo, then the text. Why is the animation on the text not delaying with this code? The other one works flawlessly, but it doesn't have any delay.
.centralimg {
background-image: url(logo.png);
background-size: 576px 173px;
width: 576px;
height: 173px;
animation: fadein 1200ms;
-moz-animation: fadein 1200ms; /* Firefox */
-webkit-animation: fadein 1200ms; /* Safari and Chrome */
-o-animation: fadein 1200ms; /* Opera */
}
.centraltext {
color: rgb(147, 145, 147);
font-family: 'Nunito', sans-serif;
font-size: 8pt;
margin-top: 25px;
animation: fadein 1200ms;
animation-delay: 3s;
-moz-animation: fadein 1200ms; /* Firefox */
-moz-animation-delay:3s;
-webkit-animation: fadein 1200ms; /* Safari and Chrome */
-webkit-animation-delay:3s;
-o-animation: fadein 3200ms; /* Opera */
}
Your code is correct, but you must add some property to the .centraltext, because it should not be visible until the animation is applied (opacity: 0 in JSFiddle example).
And also add the property animation-fill-mode to preserve the style of the last frame.
Example: JSFiddle
.centraltext {
...
opacity: 0;
animation-fill-mode: forwards;
}
It will delay two seconds, then start the animation. It can be useful.
-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
animation-delay: 2s;
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
I have multiple divs with animations, created in CSS, on my page. When the last div with animation is finished animating I wish to have the whole sequence to start over. My animations all have different delay times, and animations. I've tried the "animation: infinite" but what that achieves is the each individual animation will run again immediately after the animation has finshed. I need it start from the beginning after all of the animations have completed.
Anyone know how to achieve this?
Sample CSS
.openDiv {
width: 0px;
height: 513px;
background-image: url("CLS-circle-Ring-faded.png");
animation-name: grow;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-delay: 2s;
transition-delay: 10s;
-webkit-animation-name: grow;
-webkit-animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 2s;
-webkit-transition-delay: 10s;
}
#-webkit-keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
} /* Standard syntax */#keyframes grow {
0% {
width: 0px;
}
100% {
width: 1379px;
}
}
Today is officially my first visit to css3 animations and to be honest i cannot get it to work in FF. I have a simple notification system in place that calculates the number of sent messages to a user and It displays the value in a small red circle that blinks.
My problem is that it does not blink and also I'm having sizing, padding issues using radius.
Any help on this would be fantastic.
.alert-notification
{
border-radius: 50% !important;
width: 21px !important;
height: 21px !important;
padding-left: 6px !important;
padding-right: 6px !important;
padding-bottom: 1px !important;
background-color:#f35958 !important;
text-align:center !important;
color: #fff !important;
position:absolute;
top:25px;
left:-5px;
-webkit-animation-name: blinker;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 2s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-moz-keyframes blinker {
0% { /*opacity: 1.0;*/ background-color:#f35958;}
50% { /*opacity: 0.0;*/ background-color:#CD0000;}
100% { /*opacity: 0.7;*/ background-color:#8B0000; }
}
#-webkit-keyframes blinker {
0% { /*opacity: 1.0;*/ background-color:#f35958;}
50% { /*opacity: 0.0;*/ background-color:#CD0000;}
100% { /*opacity: 0.7;*/ background-color:#8B0000; }
}
#keyframes blinker {
0% { /*opacity: 1.0;*/ background-color:#f35958;}
50% { /*opacity: 0.0;*/ background-color:#CD0000;}
100% { /*opacity: 0.7;*/ background-color:#8B0000; }
}
This works great in Chrome! Not tested in IE. Even if this does not blink, i would very much like the value to be aligned within centre of the circle.
Regards,
Terry
This happens because FireFox prioritizes !important over keyframes, unlike chrome.
you have set
.alert-notification
{
background-color:#f35958 !important;
}
which prevents the keyframes from animating the background color. remove the !important and it will work.
Fixed Fiddle