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"; }
}
Related
This question already has answers here:
CSS Auto hide elements after 5 seconds
(5 answers)
Closed 5 years ago.
I found this question CSS Auto hide elements after 5 seconds
and I need to know how to do the oposite of this.
Basically:
-Page loads with element hidden
-Wait 5 seconds
-Show element
I'm not very good with CSS so Any help would be nice!
#thingtohide {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
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;
}
}
try this simple solution.
#showMe {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
<div id='showMe'>Wait for it...</div>
You can also use opacity insted of visibility
#showMe {
animation: cssAnimation 0s 5s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
<div id='showMe'>Wait for it...</div>
You can run something like this. This sets the opacity to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.
#showMe {
opacity: 0;
-moz-animation: cssAnimation 5s;
/* Firefox */
-webkit-animation: cssAnimation 5s;
/* Safari and Chrome */
-o-animation: cssAnimation 5s;
/* Opera */
animation: cssAnimation 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id='showMe'>Wait for it...</div>
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/
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 got a css slideshow off the net and installed it , the demo had 8 images in it but i only wanted 3 , so i've have tried this a 100 times to get it working , but i simply can't
I set up a jsfiddle for the initial version - http://jsfiddle.net/jyfcm4jh/ which works perfectly.
And also set one up for the modified version , with only 3 images displaying , but you can see there is a blank space appearing before each image slides to the next
http://jsfiddle.net/jyfcm4jh/1/
Here is my css i edited for only 3 images
.css-slideshow img:nth-child(1) {
-webkit-animation:xfade 15s 10s infinite;
-moz-animation:xfade 15s 10s infinite;
-ms-animation:xfade 15s 10s infinite;
-o-animation:xfade 15s 10s infinite;
animation:xfade 15s 10s infinite;
}
.css-slideshow img:nth-child(2) {
-webkit-animation:xfade 15s 5s infinite;
-moz-animation:xfade 15s 5s infinite;
-ms-animation:xfade 15s 5s infinite;
-o-animation:xfade 15s 5s infinite;
animation:xfade 15s 5s infinite;
}
.css-slideshow img:nth-child(3) {
-webkit-animation:xfade 15s 0s infinite;
-moz-animation:xfade 15s 0s infinite;
-ms-animation:xfade 15s 0s infinite;
-o-animation:xfade 15s 0s infinite;
animation:xfade 15s 0s infinite;
}
The problem comes from your "xfade" percentages (of #keyframes).
Here is how you should choose your values (from this website):
For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n
animation-delay = t/n or = a+b
Percentage for keyframes:
0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
EDIT:
In your case:
a = 4s (each color frame appears during 4s)
b = 1s (the transition lasts 1s)
t = 15s (you chose 15s for the total duration)
So your percentages in CSS should be something like this (for each browser equivalent):
#-webkit-keyframes xfade {
0% {
filter:alpha(opacity=100);
opacity:1;
}
27% {
filter:alpha(opacity=100);
opacity:1;
}
33% {
filter:alpha(opacity=0);
opacity:0;
}
93% {
filter:alpha(opacity=0);
opacity:0;
}
100% {
filter:alpha(opacity=100);
opacity:1;
}
}
And finally, you should remove this CSS property (unless you want a white frame effect for each transition):
/*
.css-slideshow img:nth-child(1),
.css-slideshow img:nth-child(2),
.css-slideshow img:nth-child(3) {
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
filter:alpha(opacity=0);
opacity:0;
}
*/
You're all set!
JSFIDDLE
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!