i have some css animated button.
.bottom_panel ul li.bottom_panel_button_04 {
background: url('../img/bottom_panel_icons/ap_bottom_panel_back_button_01_131.png') center center no-repeat;
-webkit-animation: myfirst 2s linear infinite;
-moz-animation: myfirst 2s linear infinite;
-ms-animation: myfirst 2s linear infinite;
-o-animation: myfirst 2s linear infinite;
animation: myfirst 2s linear infinite;
}
#-moz-keyframes myfirst {
0% {background: url('../img/bottom_panel_icons/ap_bottom_panel_back_button_01_131.png') center center no-repeat;
}
50% {background: url('../img/bottom_panel_icons/ap_bottom_panel_back_button_01_131_on.png') center center no-repeat;
}
100% {background: url('../img/bottom_panel_icons/ap_bottom_panel_back_button_01_131.png') center center no-repeat;
}
}
On Chrome everything is fine but firefox can't fire this animation... what is wrong?
Replace #-moz-keyframesto #keyframes and add #-webkit-keyframes for Saffari and Chrome (and all Chromium-based browsers)
You can see an example here.
And here is the link to your (working) example.
Related
I have following code running fine on modern browsers, except IE11 :
A simple pseudo-element animated to rotate indefinitely.
#keyframes spin{
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes spin{
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin{
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.spin-container{
position: relative;
width: 400px;
height: 300px;
margin: 2em auto;
box-sizing: border-box;
}
.spin-container::after{
content: "";
position: absolute;
display: block;
opacity: 1;
border-color: rgba(0, 0, 0, 0.2) green green rgba(0, 0, 0, 0.2);
border-radius: 100%;
border-style: solid;
border-width: 10px;
width: 100px;
height: 100px;
bottom: 50px;
right: calc(50% - 50px);
border-radius: 100%;
-webkit-animation: spin 1s linear infinite;
-moz-animation: spin 1s linear infinite;
-ms-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
<div class="spin-container"></div>
I've been looking for a reason for weeks now, and I cannot determinate a property that can cause this.
I first suspected a transform-origin to not be the center of my pseudo-element spinner, but it appears that default value is 50% 50% 0 for every browser.
Then I looked into z-axis modification, or crazy inheritance, but I definitely found nothing.
Does anyone know why this flickers on IE11, and not on other browsers ?
IE11 has some issues related to hardware acceleration and CSS animation:
IE 11 Leaving Artifacts and not redrawing screen
CSS Transition Property not working for SVG Elements
Microsoft is only fixing security related issues in IE11, so this will most likely remain unfixed.
I am using steps() in my css animation. Now I want to start the css animation after a particular time. Below is an example.
#-webkit-keyframes typing {
from { width: 0 }
to { width:455px; }
}
#-moz-keyframes typing {
from { width: 0 }
to { width:16.3em }
}
#-webkit-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
#-moz-keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: black }
}
.typing_animation h3 {
position: absolute;
font-size: 36px;
width:455px;
left: 0;
top:110px;
font-style: italic;
display: inline-block;
margin-left: -48px;
letter-spacing: 4px;
white-space: nowrap;
overflow: hidden;
border-right: 1px solid #000;
-webkit-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
-moz-animation: typing 10s steps(25, end), blink-caret 1s step-end infinite;
}
The above one results in a cool typing animation. However, it starts right away. I want to hold the typing and start it after a delay of say 5 seconds.
Thanks
PS: A Fiddle in case that's useful
Maybe it's late but this is what you need:
Change your element width from "455px" to "0" ;
Then add "animation-fill-mode: forwards" into your ".typing_animation h3" class, so this css rule force to animation can change the width;
Add your desired delay like this: "animation-delay: 3s".
Notice: Don't forget prefixes and if you use several animations on a element, it's better to use a shorthand animation property. see tutorials.
This is a example: jsfiddle
/* typing animation */
#keyframes typing {from {width: 0} to {width:19em}}
#-webkit-keyframes typing {from {width: 0} to {width:19em}}
#-moz-keyframes typing {from {width: 0} to {width:19em}}
/* blinking animation */
#keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
#-webkit-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
#-moz-keyframes blink-caret {from, to {border-color: transparent} 50% {border-color: #000000}}
.my-animation {
width: 0;
overflow: hidden;
white-space:nowrap;
border-right: 0.1em solid #000000;
animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-webkit-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
-moz-animation: typing 6s steps(30, end) 4s forwards, blink-caret 1s step-end 4s infinite;
}
Try the animation-delay property:
-webkit-animation-delay: 5s;
animation-delay: 5s;
Note: Add this to the end of your h3 rule
you can use setTimeout function and add class to the particular element
setTimeout(function(){
$('p').addClass('text-show')
}, 3000);
p
{
font-size:60px;
}
.text-show
{
animation: textshow 2s ease-out forwards;
}
#keyframes textshow {
0% {
transform: scale3d(0.6, 0.6, 0.6);
opacity: 0;
}
100% {
transform: scale3d(1, 1, 1);
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>We Design.</p>
thanks,
Jomin George paul
I have a simple loading animation that involves rotating a div with a background image. For whatever reason, the animation functions flawlessly in Chrome and Safari, but fails to animate in Firefox. Additionally, when viewing the element in the inspector no animation property is shown, leading me to believe Firefox is rejecting the property based on its syntax. The syntax is W3C standard as far as I know. Here's the keyframes codes:
#keyframes spin{
0%{ transform: rotate(0deg);}
100%{ transform: rotate(-360deg);}
}
#-webkit-keyframes spin{
0%{ -webkit-transform: rotate(0deg);}
100%{ -webkit-transform: rotate(-360deg); }
}
#-moz-keyframes spin{
0%{ transform: rotate(0deg);}
100%{ transform: rotate(-360deg);}
}
And this is the selector code:
animation: 'spin' 2s linear 0s infinite;
-webkit-animation: 'spin' 2s linear 0s infinite;
-moz-animation: 'spin' 2s linear 0s infinite;
Removing ' ' from 'spin', like this: animation: spin 2s linear 0s infinite; fixes it.
See demo
EDIT: I may also add that you should put the unprefixed version last, as seen in my demo.
-webkit-animation: spin 2s linear 0s infinite;
-moz-animation: spin 2s linear 0s infinite;
animation: spin 2s linear 0s infinite;
I've been experimenting lately with some css3. What I'm trying to do is make a background image slide left and repeat seamlessly to give the effect of an infinite background animation (kind of like how they do backgrounds in old cartoons, where it's just looping over and over...). The problem that I'm facing with this css3 is that once the animation is complete, it snaps back into it's starting position. See here: my blog. The background of the entry titled "super sluggy" will snap back into place after the animation has completed. I've been looking through w3schools for the answer, and google and even related stack questions but I can't find the solution anywhere. Here is my code:
#keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}
#-moz-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}
#-webkit-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}
#-o-keyframes l_2_r
{
from {background-position: top left;}
to {background-position: top right;}
}
#sluggy_div{
background: url('../imgs/sluggy-bg.jpg') repeat-x;
animation: l_2_r 7s linear infinite;
-moz-animation: l_2_r 7s linear infinite;
-webkit-animation: l_2_r 7s linear infinite;
-o-animation: l_2_r 7s linear infinite;
}
the background itself is seamless if repeated along the x axis, however when animated the transition is a quick snap and I'd like it to be seamless or not noticable to the user I should say.
Does anyone know how to fix this? Thanks!
The easiest solution I came up with is to simply animate the background-position in the x direction from 0 to a position that's effectively the negative of its width (in this case -1000px):
#-webkit-keyframes l_2_r {
from {background-position: 0 0;}
to {background-position: -1000px 0;}
}
#sluggy {
width: 560px;
height: 374px;
border: 1px solid #f90; /* just for visibility */
background-image: url(http://digitalbrent.com/imgs/sluggy-bg.jpg);
-webkit-animation: l_2_r 7s linear infinite;
}
JS Fiddle (Webkit-vendor-prefix only) demo.
And this seems, in Chromium 18, to work fine. Hopefully you don't mind my using your actual images in the demo, but I didn't have any suitable images with which to test.
Is there a way that I can do the following?
I have a transparent png sprite that shows a standard picture on the left, and a picture for the :hover state on the right.
Is there a way that I can have the image fade from the left image into the right image on :hover using only css3 transitions? I've tried the following, but it doesn't work:
li{-webkit-transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; transition:all 0.5s linear;}
li{background:url(/img/sprites.png) 0 -50px no-repeat;}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat;}
Now, the above does animate the background, it pans the image across. What I'd like instead of a pan is a fade or dissolve effect.
UPDATE: I ended up having to create two elements and just animate the opacities separately. It's a tad messy because I have to specify the exact margins of each element, but I guess it'll work. Thanks for everyones help :)
The latest news on this topic:
Chrome 19 and newer supports background-image transitions:
Demo:
http://dabblet.com/gist/1991345
Additional info:
http://oli.jp/2010/css-animatable-properties/
You haven't specified any code to do the actual transition.
http://css3.bradshawenterprises.com/cfimg1/
Try this out in your hover style:
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
Take a look at this: http://jsfiddle.net/j5brM/1/
I think this suits all your needs and its a little bit less complicated.
I don’t think you can change the opacity of just background images in CSS, so unless you have two separate elements for the background image (one for each position of the sprite) and change the opacity of both of them on hover, I think you’re stuck.
li{background:url(/img/sprites.png) 0 -50px no-repeat; background:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background:rgba(100, 125, 175, 0);}
should be
li{background:url(/img/sprites.png) 0 -50px no-repeat; background-color:rgba(80, 125, 200, 0.55);}
li:hover{background:url(/img/sprites.png) 0 -150px no-repeat; background-color:rgba(100, 125, 175, 0);}
not sure if that fixes it or not though.
I know this may be a tad late. But I was struggling with the same issue for a long time. Also with transparent sprites many solutions don't seem to work.
What I did is this
HTML
<div class="sprite-one">
<span class="foo"></span><span class="zen"></span>
</div>
CSS
.sprite-one {
height: 50px
width: 50px
}
.sprite-one span {
width: 50px;
height: 50px;
display: block;
position: absolute;
}
.foo, .zen {
background-image: url(sprites.png) no-repeat;
-webkit-transition: opacity .6s ease-in-out;
-moz-transition: opacity .6s ease-in-out;
-o-transition: opacity .6s ease-in-out;
transition: opacity .6s ease-in-out;
}
.foo {
background-position: 0 0;
opacity: 1;
}
.zen {
background-position: -50px 0;
opacity: 0;
}
.sprite-one:hover .foo {
opacity: 0;
}
.sprite-one:hover .zen {
opacity: 1;
}
This is a pure css way & has a bit of a lot of coding.. but seems be the only way I achieved the desired effect! Hope people that also stumble onto this can find some help from this!
<li class="image transition"></li>
css:
.image{
background-image: url("some/file/path.png");
background-repeat: no-repeat;
width: XXpx;
height: XXpx;
background-position: center center;
background-size: cover;
}
/* DRY */
.transition{
transition: background 0.6s;
-webkit-transition: background 0.6s;
}
.image:hover{
background-image: url("some/file/path_hoverImage.png");
}
CSS:-
li {
background: url(http://oakdale.squaresystem.co.uk/images/solutions.png) no-repeat left center;
background-size: 89px;
padding: 54px 0 54px 130px;
webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}
li:hover {
background-size: 50px
}