I am trying to make a similar example like https://css-tricks.com/svg-line-animation-works but I would like it to rotate infinite.
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite; /* Chrome, Safari, Opera */
animation: animate1 5s infinite;
}
#keyframes animate1 {
to {
stroke-dashoffset: 1000;
}
}
#-webkit-keyframes animate1 {
to {
stroke-dashoffset: 1000;
}
}
I made an example http://jsfiddle.net/46cmu71t/. I put the code to do this infinite but it slow down and then start again. Is there any way to make it rotate without losing speed?
Very easy to do, add the linear method to the transition line:
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */
animation: animate1 5s infinite linear;
}
More about CSS transition timing
More about CSS transitions
JSFiddle Demo
Might want to read up a bit more on CSS Animations. The property you’re looking for is called a timing function. By default an animation is set to ease-out, and you should be using linear instead. E.g.
#path1 {
stroke-dasharray: 170;
-webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */
animation: animate1 5s infinite linear;
}
Updated fiddle: http://jsfiddle.net/mfgmxhqm/
Related
I have a text spinner/rotator on my website,
link: http://jaaplangenberg.nl/index2.php
The problem is, on my IPhone it doesnt work, instead of the spinning word is all I see is empty space.
EDIT: I see it doesnt work on Safari in general (also browser)
I can't figure out what is wrong!
This is the code:
<p class="slogan">Je <span id="spin"></span> <br />van betekenis.</p>
And the css:
#spin:after {
content:"";
animation: spin 10s linear infinite;
-webkit-animation: spin 10s linear infinite; /* Safari 4+ */
-moz-animation: spin 10s linear infinite; /* Fx 5+ */
-o-animation: spin 10s linear infinite; /* Opera 12+ */
animation: spin 10s linear infinite; /* IE 10+ */
}
#keyframes spin {
0% { content:"merk"; }
50% { content:"missie"; }
100% { content:"verhaal"; }
}
#-webkit-keyframes spin {
0% { content:"merk"; }
50% { content:"missie"; }
100% { content:"verhaal"; }
}
I am working on project having multiple animation on same element time to time and switching animation-play-state paused to running.
When i'm trying to add a class having animation shorthand syntax including animation-play-state:running then it's not working in IE & Safari.
.fadein-left {
-webkit-animation: fadeInLeft 1s 2s both running;
animation: fadeInLeft 1s 2s both running;
}
jsfiddle link
But if i use animation-play-state in separate line then it's working fine in all browser.
.fadein-left {
-webkit-animation: fadeInLeft 1s 2s both;
animation: fadeInLeft 1s 2s both;
-webkit-animation-play-state: running;
animation-play-state: running;
}
jsfiddle link
I checked animation property on msdn in Remarks section they just mentioned-
However, the animation property does not specify values for the animation-play-state property.
Is it possible to use animation-play-state in shorthand animation or i have to use it in separate line?
try out this:
div {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 5s; /* Chrome, Safari, Opera */
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation: mymove 5s;
animation-play-state: paused;
}
For hiding an element after 5 seconds, I have used below code.
But it does not work in Firefox.
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
<div class="classname">This will hide</div>
There are some issues with the code above:
The animation is not the same for all browsers: one is animating the visibility (webkit), the other one is animation the overflow (standard).
The overflow property is not animatable.
Firefox has a history of issues with the visibility property (this is not your fault but a problem of Firefox itself, you can find many questions on SO related to it).
Because of the way in which you are running the animation (with a duration of 0s), you can trick Firefox by using the from in the CSS animation. The thing is that Firefox is not animating the visibility, but it will apply the style in the from part of the animation anyway, so you'll get the desired effect.
.classname {
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
-moz-animation: cssAnimation 0s ease-in 5s forwards;
-o-animation: cssAnimation 0s ease-in 5s forwards;
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
#-webkit-keyframes cssAnimation {
from {
visibility:hidden;
}
to {
width:0;
height:0;
visibility:hidden;
}
}
<div class="classname">This will hide</div>
If the duration of the animation was higher than 0 seconds, this solution wouldn't work; but as the change is automatic, it works fine (and it will not affect the rest of the browsers).
The advantages of this solution:
The behavior is the same in all the browsers.
The hidden text is not selectable.
The disadvantages:
This is a workaround and not how things should be done.
It does not work if the duration of the effect is higher than 0s.
Try to use fixed width and height for your block (in % or px) and opacity instead visibility — http://jsfiddle.net/sergdenisov/wek6x4Ln/11/:
.classname {
width: 200px;
height: 50px;
-webkit-animation: css-animation 0s ease-in 5s forwards;
animation: css-animation 0s ease-in 5s forwards;
}
#-webkit-keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}
#keyframes css-animation {
to {
width: 0;
height: 0;
opacity: 0;
}
}
I've just set up a few css animations and everything is running smoothly in Chrome and Safari however Firefox doesn't appear to be playing nice.
The following code:
#clock-animation .hour {
-webkit-animation: anti-spin 30s infinite;
animation: anti-spin 30s infinte;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
Appears to be displaying as:
#clock-animation .hour {
transform-origin: 50% 50% 0;
}
When viewed in Firebug and consequently the animation isn't playing.
I'm a tad confused as to why this is and nothing appears to be fixing it.
Here are the keyframes used too:
#-webkit-keyframes anti-spin {
100% {
-webkit-transform: rotate(-360deg);
}
}
#keyframes anti-spin {
100% {
transform: rotate(-360deg);
}
}
According to http://shouldiprefix.com/ the -moz prefix isn't needed for keyframes, animation or transform. Nor is the -webkit which is only needed for Chrome and Safari. Any help would be great.
Edit: Just to mention that the IDs and classes are part of an inline SVG file. I'm not sure if that is relevant or not?
Edit: Heres a link to a demo https://jsfiddle.net/0Lha6dfg/ (Works fine in Chrome / Safari but not in FF (36.0.1))
Make sure to write out your animation shorthand property in full, do not skip properties. Shorthand format from w3 specs:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Becomes:
div {
animation: example 5s linear 2s infinite alternate;
}
So in your example add the animation-delay:
animation: anti-spin 30s linear infinite;
Should be:
animation: anti-spin 30s linear 0s infinite;
Also watch out for typos, in some places you have "infinte" instead of "infinite".
I am using following css3 code for a 2d 360 degrees animation. It works for all browsers (except of course ie version < 10) but i cannot make it work for webkit. As you can see here the live example http://www.franksdonuts.gr/mainpage/ webkit (chrome, safari) fails. My code is the following :
#keyframes spinner {
0% {
-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-o-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
}
.spinner {
-webkit-animation: spinner 10s infinite linear;
-moz-animation: spinner 10s infinite linear;
-ms-animation: spinner 10s infinite linear;
-o-animation: spinner 10s infinite linear;
animation: spinner 10s infinite linear;
}
Is there a better solution to achieve this 2d rotation with ie9 too?
You should use proprietary keyframes tag.
#-moz-keyframes
#-webkit-keyframes
#-o-keyframes
Have you look into Greensock JS? It's pretty amazing and so convenient.
http://www.greensock.com/get-started-js/
Enjoy!