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
Related
This may be a dumb question (haven't done JS/HTML in a bit). I want this animation to be smooth all the way through but for some reason, it is stopping in the middle for a short period of time then resuming. Adding more steps to try and smooth the transition only seems to make is pause for longer. Is there a fix for this?
#under {
color: black;
font-size: 28px;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
#keyframes example {
0% {
transform: translateX(-330px);
}
50% {
transform: scaleX(3);
}
100% {
transform: translateX(330px);
}
}
<body>
<div id="under">
<p> - </p>
</div>
</body>
To keep things moving evenly, you need to define your scaleX values at 0% and 100%. In addition, I changed your timing function from ease-in-out to linear. At 50%, translateX is already at 0 since you defined the start and end values. For consistency, I added the 0 value at 50%.
#under {
background-color: #000;
color: white;
animation-duration: 4s;
animation-name: example;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
width: 100px;
height: 50px;
}
#keyframes example {
0% {
transform: scaleX(1) translateX(-330px);
}
50% {
transform: scaleX(3) translateX(0);
}
100% {
transform: scaleX(1) translateX(330px);
}
}
<div id="under"></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
I am trying to perform a rotate on the Y axis of an element that contains a background-image. When I reach 50% of that animation, I would like to change the image.
The problem:
The background-image is also animated
I am trying to do this without the use of Javascript.
Is that possible?
Code:
.picture {
background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png');
display: inline-block;
vertical-align: top;
border: 5px solid red;
width: 250px;
height: 250px;
background-size: 100% 100%;
border-radius: 100%;
}
.animated {
-webkit-animation-name: turns;
animation-name: turns;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes turns {
0% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); -webkit-transform: rotateY(0deg); }
1% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); }
50% { background-image: url('http://img3.wikia.nocookie.net/__cb20130216121424/adventuretimewithfinnandjake/images/2/29/Tom-cruise-funny-face.png'); }
51% { background-image: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg'); }
100% { background-image: url('http://i3.mirror.co.uk/incoming/article172940.ece/alternates/s615/image-16-jim-carrey-50th-birthday-604638636.jpg'); -webkit-transform: rotateY(180deg); }
}
jsFiddle: http://jsfiddle.net/dmzj7cfh/1/
If the problem that you have is that the background image change does nt happen in the 50% of the rotation, it's because the timing funciont is applied for the individual steps in the case of the background (because it is set in every keyframe), but for the full animation in the case of the rotation.
The easiest way to solve it is to set
-webkit-animation-timing-function: linear;
so that it doesn't matter the above problem
I have also fixed a problem with the background size.
fiddle
You should probably use multiple animation keywords to simplify, as you need to change two different properties.
For background-image animation, use animation-timing-function: steps(2); and for transform: rotate;, use linear function to simplify the keyframes.
Using non-linear functions like ease and custom cubic-bezier()s can create a lot of complexities.
FIDDLE
Snippet :
div{
display: inline-block;
border: 5px solid red;
width: 250px;
height: 250px;
background-size: cover;
border-radius: 100%;
-webkit-animation-name: animate, background;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear, steps(2);
animation-name: animate, background;
animation-iteration-count: infinite;
animation-duration: 2s;
animation-timing-function: linear, steps(2);
background-image: url('http://i.imgur.com/gmucjHi.png');
position: relative;
}
#-webkit-keyframes animate {
0% {transform: rotateY(90deg);}
100% {transform: rotateY(450deg);}
}
#-webkit-keyframes background {
0% {background-image: url('http://i.imgur.com/gmucjHi.png');}
100% {background-image: url('http://i.imgur.com/mZinlRQ.jpg');}
}
#keyframes animate {
0% {transform: rotateY(90deg);}
100% {transform: rotateY(450deg);}
}
#keyframes background {
0% {background-image: url('http://i.imgur.com/gmucjHi.png');}
100% {background-image: url('http://i.imgur.com/mZinlRQ.jpg');}
}
<div></div>
Note : I haven't added vendor prefixes other than -webkit-.
Please help me, I can't see bug. I tryed everything. Thanks people. You can see my code on this link.
http://jsfiddle.net/astrogastro/dFZgn/
#sun{
width: 500px;
height: 500px;
background: yellow;
background-image: url('img/sunmap.jpg');
background-repeat: repeat-x;
background-position: center;
border-radius: 50%;
background-size:1000px;
animation-name:rotateSun;
animation-duration: 6s;
animation-iteration-count: infinite;
animation-timing-function:linear;
-o-animation-name:rotateSun;
-o-animation-duration: 6s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function:linear;
-moz-animation-name:rotateSun;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:rotateSun;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function:linear;
box-shadow: 0 0 7em #FFFF4D, 0 0 0.5em #FFFF4D, 0 0 0.3em #FFFF4D;
float: left;
}
#keyframes rotateSun{
from {background-position-x:1px;}
to {background-position-x:1011px;}
}
#-o-keyframes rotateSun{
from{background-position-x:1px;}
to{background-position-x:1011px;}
}
#-moz-keyframes rotateSun{
from {background-position-x:1px;}
to {background-position-x:1011px;}
}
#-webkit-keyframes rotateSun{
from {background-position-x: 0px;}
to {background-position-x:1010px;}
}
So, it works pefectly in Safari, there's little freezing in Chrome but it's okay. My animation is completely dead in Opera and Firefox. Any idea?
http://www.astrogastro.byethost24.com/
There is no standard background-position-x property (and in particular Firefox doesn't have support for that non-standard feature).
You need to prefix your #keyframes as well as your animation...
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?