I want to create a CSS3 Animation that works on non-webkit browsers and webkit browsers. I included both CSS tags, but it refuses to work on Firefox. It works great on Chrome and Safari. Any ideas?
HTML:
<svg>
<g fill="none" stroke="black" stroke-width="6">
<path stroke-dasharray="10,10" stroke="#000000" stroke-width="4" d="M108.634,309.137c0.19-29.637,0.772-122.891,0.677-140.006c-0.112-20.395,6.424-61.949,66.966-61.949c40.273,0,65.163-0.552,77.294,0c24.892,1.132,34.114-11.41,37.47-19.581"/>
</g>
</svg>
CSS :
#keyframes antsAnimation {
from {
stroke-dashoffset: 100%;
}
}
#-webkit-keyframes antsAnimation {
from {
stroke-dashoffset: 100%;
}
}
svg {
animation: antsAnimation 15s linear infinite;
animation-fill-mode: forwards;
-webkit-animation: antsAnimation 15s linear infinite;
-webkit-animation-fill-mode: forwards;
}
JSFiddle: http://jsfiddle.net/MpLwk/
Thanks again!
I've updated the fiddle. Have a look HERE
It appears that on mozilla you need to have a start and an end for the stroke-dashoffset...
from {
stroke-dashoffset : 100%;
}
to {
stroke-dashoffset: 0%;
}
I think for firefox you will have to specify the following
#-moz-keyframes ANIMATION-NAME {
}
Try This.
#keyframes antsAnimation {
from {
stroke-dashoffset: 100%;
}
}
#-webkit-keyframes antsAnimation {
from {
stroke-dashoffset: 100%;
}
}
#-moz-keyframes antsAnimation {
from {
stroke-dashoffset: 100%;
}
}
svg {
animation: antsAnimation 15s linear infinite;
animation-fill-mode: forwards;
-webkit-animation: antsAnimation 15s linear infinite;
-webkit-animation-fill-mode: forwards;
-moz-animation: antsAnimation 15s linear infinite;
-moz-animation-fill-mode: forwards;
}
You need to call the vendor specific tags
Related
I want remove zoom in zoom out effect from mobile view but not getting solution,
.whats_next_float .lets_go_wrapper img.logo_img {
animation: zoominout 3s infinite;
}
animation: zoominout 3s infinite;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: zoominout;
}
Anyone have idea then let me know.
You can set the CSS animation property to none.
#media only screen and (max-width: 600px) {
.whats_next_float .lets_go_wrapper img.logo_img {
-webkit-animation: none;
-moz-animation: none;
-o-animation: none;
-ms-animation: none;
animation: none;
}
}
I using a vertical sprite sheet in an animation with #keyframe.
I just can't get it to work correctly.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
-webkit-animation: play .9s steps(8) infinite;
-moz-animation: play .9s steps(8) infinite;
-ms-animation: play .9s steps(8) infinite;
-o-animation: play .9s steps(8) infinite;
animation: play .9s steps(8) infinite;
}
#keyframes play {
from { background-position:0px; }
to { background-position:0px 1080px; }
}
<div class="hi"></div>
I tried using #keyframe with background-position-y axis to no avail.
It should be animation at 1 frame.
You just needed to change the steps to 6.
Basically speaking, steps is the number of sprites you are wanting to show over X time. So in this case, you only have 6, not 9.
I also changed it to use background-position.y.. note that having background-position: 0 0; is also good practice for when you come across more complex, grid sprite sheets.
body{
background: brown;
}
.hi {
width: 117px;
height: 180px;
background-image: url("http://i.imgur.com/DxApxaV.png");
background-position: 0 0;
-webkit-animation: play .9s steps(6) infinite;
-moz-animation: play .9s steps(6) infinite;
-ms-animation: play .9s steps(6) infinite;
-o-animation: play .9s steps(6) infinite;
animation: play .9s steps(6) infinite;
}
#keyframes play {
from { background-position-y:0px; }
to { background-position-y:1080px; }
}
<div class="hi"></div>
When playing around with some SVG animation, i ran into a strange artifact. When rendering keystroke-dashoffset animations in Chrome (haven't tested any other browsers) stops before they are finished, see below. In this case it is the S and M.
The lines also seem to retract a bit in the beginning. How do i fix this so that the letters render fully?
I use OSX El Capitan and Chrome v.51.0.2704.84.
Here is the code (not written by me):
text {
font-family: sans-serif;
stroke-dasharray: 100%;
stroke-dashoffset: 100%;
-webkit-animation: draw 8s forwards;
-moz-animation: draw 8s forwards;
-o-animation: draw 8s forwards;
-ms-animation: draw 8s forwards;
animation: draw 8s forwards;
}
#-webkit-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-o-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-ms-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
<svg width="500" height="150">
<text x="100" y="80" fill="none" stroke="black" stroke-width="1" font-size="50">Some text</text>
</svg>
The problem lies in the stroke-dasharray property in CSS. Setting this to a value larger than 100% (125% is enough for most fonts) will draw the letters correctly. This will cause the letters to already be drawn when the animation starts, so i set the stroke-dashoffset property to 125%, too.
body {
background:black;
}
text {
font-family: initial;
stroke-dasharray: 125%;
stroke-dashoffset: 125%;
-webkit-animation: draw 5s ease-in-out forwards;
-moz-animation: draw 5s ease-in-out forwards;
-o-animation: draw 5s ease-in-out forwards;
-ms-animation: draw 5s ease-in-out forwards;
animation: draw 5s ease-in-out forwards;
}
#-webkit-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-moz-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-o-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#-ms-keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
#keyframes draw {
100% {
stroke-dashoffset: 0;
}
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<svg width="500" height="150">
<text x="100" y="80" fill="none" stroke="white" stroke-width="1" font-size="50">Some text</text>
</svg>
Got a small img slideshow running with animation/keyframes, it has 4 images running 6 seconds each on a 24s infinite loop,
The problem is that when it runs through once, the transition is fine, once it has gone through the 4 images and repeats, there is a good 2-3 seconds after an image fades out and the next one fades in.
First time using animation and keyframes so i'm not 100% what i've done wrong. The slide show is running in a div called .slideshow
I've taken out most prefixes for space and readability:
/* CSS */
.slideshow figure:nth-child(4) {
-webkit-animation: xfade 24s 0s infinite;
animation: xfade 24s 0s infinite;
}
.slideshow figure:nth-child(3) {
-webkit-animation: xfade 24s 6s infinite;
animation: xfade 24s 6s infinite;
}
.slideshow figure:nth-child(2) {
-webkit-animation: xfade 24s 12s infinite;
animation: xfade 24s 12s infinite;
}
.slideshow figure:nth-child(1) {
-webkit-animation: xfade 24s 18s infinite;
animation: xfade 24s 18s infinite;
}
#keyframes "xfade" {
0% {
opacity: 1;
}
14% {
opacity: 1;
}
16% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Not a duplicate, having a problem with a single image slideshow that loops fine for the first 24s, then a major 2-3 gap between images every time after..
Try changing the xfade animation to
#keyframes "xfade" {
0% {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
100% {
opacity: 0;
}
}
Logically since the images are 4 the cycle should be 25%,
I would like to design my CSS file in this way:
<h1 class="bounce">Bouncing Text</h1>
<h1 class="bounce fast">Faster Bouncing Text</h1>
I have CSS code that looks like this, but it doesn't seem to be working:
.fast {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
.bounce {
-webkit-animation-name: bounce-animation;
animation-name: bounce-animation;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
The 'fast' class does not seem to actually change the animation-duration at all. The two elements bounce at the same speed.
Is there anyway to make this design work? Thanks
Try this
.fast {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
.bounce {
position: relative;
-webkit-animation: bounce-animation 5s infinite;
animation: bounce-animation 5s infinite;
-webkit-animation-duration: 2s;
}
#-webkit-keyframes bounce-animation {
from {left: 0px;}
to {left: 200px;}
}
#keyframes bounce-animation {
from {left: 0px;}
to {left: 200px;}
}
http://jsfiddle.net/x8326n81/3/
I realized that I was applying the animation to the ::after pseudo element. In order to see the results, I needed to adjust my fast CSS:
.fast,
.fast::after {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
display: block; will fix the problem. :)