make purely css animated icons cross browser compatible - html

I have some css animated weather icons that I would like to make cross browser compatible, right now they are working perfectly in firefox, I'm working on google chrome compatibility.
As it is just too much code, I've just setup a fiddle. Here.
I have added all the
-webkit-...
additions to transform and animation and to the keyframes, but there is still a little bug you can see in the fiddle, when hazy and following are up:
Chrome:
the desired behaviour at this point is:
Firefox:
I don't get what else I could do, maybe someone here knows better.

I found the problem. I reduced your case to a simplified version containing only clouds: http://jsfiddle.net/kcf44udg/1/ and I noticed a few cases where your -webkit-prefixed properties didn't match the non-prefixed versions (so it isn't a bug in Chrome at all):
.cloud .cloud1:not(.c_shadow) ul li{
animation: cloudi 10s 0.1s linear infinite;
-webkit-animation: cloudi 10s 0.1s linear infinite;
}
.cloud .cloud1:not(.c_shadow):before{
animation: cloudi 10s 0s linear infinite;
-webkit-animation: cloudi 10s 0s linear infinite;
}
You're missing the cloudi in the -webkit-animation lines.
Here's a working version: http://jsfiddle.net/kcf44udg/2/

Related

stroke-dashoffset Animation doesn't work in Safari

I have a CSS3 animation I'm working on for my website in which the stroke-dashoffset of an SVG is animated. It works fine on Chrome and Opera but doesn't work on Safari or Firefox. On Safari, the text shows up but does not animate. On Firefox, the text doesn't show up at all. It's most important to me to get Safari working so that it shows up correctly on iOS.
I've tried a bunch of stuff already including changing the units, using percentage keyframes rather than to and from, adding and removing prefixes, not using shorthand for the animation properties, changing various properties, trying different webkit prefixes, double checking that I'm not animating stroke-dashoffset using negative numbers, etc and nothing has worked so far. I've looked at every article I could find online and haven't found a solution. I'm hoping it's something simple that I'm overlooking or that there is an easy workaround but I fear that it's a webkit bug.
I've put a JSfiddle below that replicates the issue in Safari and Firefox and works correctly in Chrome:
https://jsfiddle.net/lystroid/2a97ntf1/58/
Here's is the relevant HTML and CSS:
HTML
<svg width="80vw" height="150vw">
<text y = "500px" fill="none" stroke="#e2e2e2" stroke-width="0.5">ABCDE</text>
</svg>
CSS
text {
font-family:arial;
text-align: center;
color: #e2e2e2;
font-size: 23vw;
line-height: 0;
stroke-dasharray: 98vw;
stroke-dashoffset: 98vw;
animation: draw 7s ease 1 forwards;
-webkit-animation: draw 7s ease 1 forwards;
-moz-animation: draw 7s ease 1 forwards;
-webkit-animation: draw 7s ease 1 forwards;
-o-animation: draw 7s ease 1 forwards;
-ms-animation: draw 7s ease 1 forwards;
}
#-webkit-keyframes draw {
from {
stroke-dashoffset: 98vw;
}
to {
stroke-dashoffset: 0vw;
}
}
#keyframes draw {
from {
stroke-dashoffset: 98vw;
}
to {
stroke-dashoffset: 0vw;
}
}
I haven't tested the animation in Internet Explorer or Edge.
Thanks for reading!
EDIT: I should clarify that there are two animations on the page. One of them is for the caption, which works well on all browsers. The animation that I'm referring to in this question is the animation on the SVG text that says 'ABCDE'

CSS clouds animation issue

I'm having trouble integrating this CSS clouds animation into my
website. The overflow: hidden and scroll are causing my problems.
I don't want the clouds scrolling outside of the blue box background area, but don't know how . Please see http://www.filehostfree.com/cloudcsstest/cssanimation.html
I've left a comment in the source code.
To avoid the scrollbar you have to add an overflow-x: hidden; into the container of the Clouds (#clouds).
Anyway I encourage you to avoid using margin or positioning properties (like left, right...) and use transform: translate() in animation to avoid repaint and gain in page performance.
In this fiddle I changed the #keyframes animation into
#keyframes moveclouds {
0% { transform: translateX(1000px);}
100% { transform: translateX(-1000px) }
}
Also have to add that you are using prefixed properties like:
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
but not the unprefixed one, that nowadays have so good crossbrowser support.
Regarding the scroll issue, this will remove the horizontal scroll.
.yourContainingDivClass {
overflow-x: hidden;
position: absolute;
}
Regarding why the clouds suddenly appear, you should add a negative X position at the beggining and at the end of the animation cycle:
#keyframes move_cloud {
0% {
left: 120%;
}
100% {
left: -20%;
}
}
You can play around with this Pen, if you want. It has been coded using SASS, therefore you can tweak the variables to meet your needs.
CSS3 animations and Internet Explorer (IE)
IE does not support CSS3 animations until IE10, therefore your animations will not render properly in any version of IE < 10. Checkout the support table.
Alternatives to CSS3
HTML5 Canvas:
HTML5 Canvas API offers a wider range of options to create this kind of animations. The performance is also better.
Javascript:
If you feel confortable using JavaScript, a good alternative would be to use TweenJS to animate the CSS properties via DOM, although the performance will not be the same.
Thanks for all the help guys. Appreciated , the overflow-x: hidden;
fixed the scroll issue, that was main issue, only other thing it don't work in IE but that don't bother me too much, chrome and firefox are fine, my site is working now

CSS animation Ends Wrong [duplicate]

I have a 4 part CSS3 animation playing on click - but the last part of the animation is meant to take it off the screen.
However, it always goes back to its original state once it has played. Anyone know how I can stop it on its last css frame (100%), or else how to get rid of the whole div it is in once it has played.
#keyframes colorchange {
0% { transform: scale(1.0) rotate(0deg); }
50% { transform: rotate(340deg) translate(-300px,0px) }
100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}
You're looking for:
animation-fill-mode: forwards;
More info on MDN and browser support list on canIuse.
If you want to add this behaviour to a shorthand animation property definition, the order of sub-properties is as follows
animation-name - default none
animation-duration - default 0s
animation-timing-function - default ease
animation-delay - default 0s
animation-iteration-count - default 1
animation-direction - default normal
animation-fill-mode - you need to set this to forwards
animation-play-state - default running
Therefore in the most common case, the result will be something like this
animation: colorchange 1s ease 0s 1 normal forwards;
See the MDN documentation here
-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;
Browser Support
Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 ( 5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)
Usage:-
.fadeIn {
animation-name: fadeIn;
-webkit-animation-name: fadeIn;
animation-duration: 1.5s;
-webkit-animation-duration: 1.5s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The best way seems to put the final state at the main part of css. Like here, i put width to 220px, so that it finally becomes 220px. But starting to 0px;
div.menu-item1 {
font-size: 20px;
border: 2px solid #fff;
width: 220px;
animation: slide 1s;
-webkit-animation: slide 1s; /* Safari and Chrome */
}
#-webkit-keyframes slide { /* Safari and Chrome */
from {width:0px;}
to {width:220px;}
}
Isn't your issue that you're setting the webkitAnimationName back to nothing so that's resetting the CSS for your object back to it's default state. Won't it stay where it ended up if you just remove the setTimeout function that's resetting the state?
I just posted a similar answer, and you probably want to have a look at:
http://www.w3.org/TR/css3-animations/#animation-events-
You can find out aspects of an animation, such as start and stop, and then, once say the 'stop' event has fired you can do whatever you want to the dom. I tried this out some time ago, and it can work, but I'd guess you're going to be restricted to webkit for the time being (but you've probably accepted that already). Btw, since I've posted the same link for 2 answers, I'd offer this general advice: check out the W3C - they pretty much write the rules and describe the standards. Also, the webkit development pages are pretty key.
Nobody actualy brought it so, the way it was made to work is animation-play-state set to paused.
I learned today that there is a limit you want to use for the fill-mode. This is from an Apple dev. Rumor is * around * six, but not certain.
Alternatively, you can set the initial state of your class to how you want the animation to end, then * initialize * it at from / 0% .

triggering animation only when slide slide's in

hey guys i have a difficulty adding animations dynamically , I am basically just a HTML/CSS guy , who avoids JS but uses Jquery occasionally , I know how to write jquery code though . so baically my difficulty is that i have thos bootstrap carasoul fiddle here :
now i have created a CSS-3 animation for the images in the carasoul The animation code is below :
#keyframes scalebg {
0%{
-ms-transform:scale(1);
-o-transform:scale(1);
-moz-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1);
}
100% {
-ms-transform:scale(1.3);
-o-transform:scale(1.3);
-moz-transform:scale(1.3);
-webkit-transform:scale(1.3);
transform:scale(1.3);
}
}
.scalebg {
-webkit-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
-webkit-animation-name: scalebg;
-o-animation-name: scalebg;
animation-name: scalebg;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-o-animation-direction: alternate;
animation-direction: alternate;
}
The issue i am having ::
now what i would really like to do is when each slide appears i would immediately like the class scalebg to be appeared to the <img> tag in that particulate slide , the problem is how do i detect which perticular slide has slided in and how do i add the class scalebg only to that perticular slide ?? Thats the challenge that i am facing ..
the bootrap documentation does say that the bootstrap carasoul exposes 2 events :
slide.bs.carousel :: This event fires immediately when the slide
instance method is invoked.
slid.bs.carousel :: This event is fired when the carousel has
completed its slide transition.
but i am not sure how i can use these events to accomplish what i want . can somebody please guide me .
P.S. ::
as of now the effect works because i have added the following code to the animation :
animation-iteration-count: infinite;
but thats not how i would like the animation to be .
Thank you.
Alex-z.
You can use e.relatedTarget for the element to be active.
$('#myCarousel').on('slid.bs.carousel', function (e) {
$('.item').find('img').removeClass('scalebg');
$(e.relatedTarget).find('img').addClass('scalebg');
})
Fiddle Demo

glowing & pulsating text for IE8 & IE9 - css-only solution=

Is there any css only solution, to make this pulsating-glow effect work on IE8/9 or atleast 9?
.glow-texte {
color:#fff;
text-shadow:0 0 2px #fff;
animation:texte 2.4s linear 2s 20;
-moz-animation:texte 2.4s linear 2s 20;
-webkit-animation:texte 2.4s linear 2s 20;
}
.glow-texteEven {
color:#fff;
text-shadow:0 0 2px #fff;
animation:texte 2.4s linear 1s 20;
-moz-animation:texte 2.4s linear 1s 20;
-webkit-animation:texte 2.4s linear 1s 20;
}
.glow-texteOdd {
color:#fff;
text-shadow:0 0 2px #fff;
animation:texte 2.4s linear 2.2s 20;
-moz-animation:texte 2.4s linear 2.2s 20;
-webkit-animation:texte 2.4s linear 2.2s 20;
}
CSS3 pie (as Sai suggested) will get you most of the way there (shadow, styling, etc): PIE makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features. But it will not get you all the way there (it will get the shadowing effect, in this example).
IE8 is just too limited to try and do it in CSS alone. For the animated portion, you can use JavaScript. For an example of how to do that, please see this answer: Convert CSS3 animation into JQuery for use in IE8 and above
You want to check if the browser supports the technology with Modernizr.js and then you can chose to do it in CSS if it does support it OR use JavaScript to do what you can't in CSS. If you use JQuery, make sure you use a version older than 2.0:
jQuery Core: Version 1.9 and Beyond - jQuery 2.0 (early 2013, not long after 1.9): This version will support the same APIs as jQuery 1.9 does, but removes support for IE 6/7/8 oddities such as borked event model, IE7 “attroperties”, HTML5 shims, etc.
This other solution may also be of help to you finding your solution: CSS3 Animation in IE8/9