Looking at this site: https://css-tricks.com/svg-line-animation-works/
I found this
I am now at a loss how to try to change the same property (stroke-dashoffset) using the web animation api WAAPI, anyone have any clue or where I should be searching for this information?
I cannot find out what keywords to use in my keyframes, or what is valid things to write in there even
I missed the small but important print in the keyframe specification, change the property name from stroke-dashoffset to strokeDashoffset and it will work the same
Related
I'm implementing a dark theme on my website using tailwind classes. For example:
<tr className="bg-white dark:bg-dark-blue text-left dark:text-white transition-colors duration-300"></>
And for some reason, whenever I change my theme the transition isn't smooth but laggy and stuttering. I've noticed that with the increase of dark-styled elements on the page, the lag has gotten worse.
I'm not sure if this is actually a tailwind problem or a general CSS performance problem in the browser.
UPDATE
After some test I've come to the conclusion that it actually has nothing to do with transitions but with CSS itself.
I have a lot of elements on the page with dark classes set initially and then whenever I change the theme I just add/remove 'dark' class in <html>. I have may be 50 elements on the page which change their text color and background color and all of them are laggy whenever the theme gets changed. The lag is similar to when you have a memory leak or a loop. It stutters then loads all at once and stuff like that.
So I guess my question is how to optimize CSS performance in this case? or overall?
UPDATE 2
According to Performance page in devtools I'm dropping a lot of frames when changing the theme. And it actually feels like I'm getting 5fps. Here is a screenshot of Performance page prnt.sc/Zz6T88ZFs6Fp. I'm not sure how to read it, may be somebody can give some useful info
If anyone has ever faced/solved this problem, I'd greatly appreciate your advice
It may have to do with the critical rendering path. I'd advice you to read this excellent article : Achieving 60 FPS Animations with CSS3.
In a nutshell, if you have css transitions set other than on transform and opacity css properties, your browser has to recalculate the whole layout, which causes stuttering.
I don't use tailwind and it's hard to test my response without example code but I had a very similar problem several years ago when browsers were a little dumb.
I had many classes for color throughout the html and toggled them with jquery. Here's a quick example of how...
$(".red").removeClass("red").addClass("blue");
I determined that, at the time, the problem was that the items were causing repainting for each change.
What I ended up doing was swapping a class on the body:
<body class="blue">
Whatever
Something else
<!-- lots more -->
</body>
And then:
body.blue a {
color: blue;
}
body.red a {
color: red;
}
And that worked beautifully because, as I understood it, the repaint happened all at once... but I'm guessing to even try you'd have to write a lot of stuff on your own instead of using tailwind. Maybe not, so I hope this line of thinking helps even if using tailwind.
Edit: if I had the same problem and couldn't fix it quickly enough I'd fade the body with a quick opacity out and then back in. Complete hack but it might look cool. Not a solution to your real problem but it might help if you can't fix it.
You can go in the dev tools and then go under "network", then you click on "Disable cache".
After a lot of research I've managed to finally find some useful info.
With the help of this article and some info from here I found out that dropping frames is actually not uncommon but usually it is not as intense as in my case.
There are some particular lines in Profile.json (download from Network page), which can help you find the actual reason(s) of dropped frames. Look for unsupportedProperties.
In my case it was {"args":{"data":{"compositeFailed":8224,"unsupportedProperties":["color"]}},"cat":"blink.animations,devtools.timeline,benchmark,rail","id2":{"local":"0x76c803503df8"},"name":"Animation","ph":"n","pid":40040,"scope":"blink.animations,devtools.timeline,benchmark,rail","tid":13280,"ts":166257565931}. For me the reason was that too many elements on the page change their text color. 884 lines of compositeFailed related to 'color' for one theme switch on my page. Only refactor with the help of https://csstriggers.com/ would be effective in my case.
Currently, I don't know actual reasons for compositeFailed apart from that it has to do with color property and blink animation. Any Google devs would be welcome to enlighten me because I can't really find any info about that.
Hi I want to know if I can use OR operator in CSS url function.
Example:
Is this possible ?
happy.moods {
background-image: url( 'pathA/img.png' || 'pathB/img.png' );
}
As some other users pointed out in the comments, there is no way to do what you speak of. While we can set things like min-width and max-width to achieve some half-baked logic, CSS and HTML really does not have a concept of logic at all. Even with psuedo-class selectors, the logic for displaying changes in a webpage is not a property of the code you have written but a property of the web browser.
This is why you can literally write any thing (regardless of whether it is proper code or not) into an HTML or CSS file and it won't cause the program to "break" because there is nothing to "compile".
However, this is where some concepts of Javascript come into play. I'm going to assume that you want a dynamic background image, if so, just go ahead and search that on SO or on Google, there are multiple pages out there to help you out.
Hope this helps!
I tried to understand how does the WooRank loader (of rank) is working by the CSS?
Take a look on the below shot so you'll understand what im asking for.
While the background of the loader is
this is a wonderful animation that i wanna know how to do myself.
It's not done with CSS. They use Raphaël to build an SVG. You can find the JavaScript code for the generation around line 844 in their JavaScript file.
You might also look at this example, it uses some similar effects.
I'm note sure if there is a practical solution in pure CSS right now. Anybode else got some ideas?
Does somebody know a little Javascript librabry that will mimic CSS3 transitions for browsers like Firefox 3.6 or IE8?
Example:
-webkit-transition:left 1s ease-in;
I guess such a library is quite hard to develop.
These two support a lot but no CSS3 transitions:
CSSsandpaper
CSSPie
And then we have Modernizr but it only does feature testing.
The great thing about having an extra mini library for CSS3 transitions support is that you don't need to write your own backup code. You could just plug it in and be sure that those transitions work in most browsers.
YOu can try using JQuery animation to mimic the effect, but it still requires some coding. Nothing as simple as CSS3 code for transitions ;(
I was looking for the same library and didn't succeed, so I decided to create it.
Hope that's what you wanted - alevkon / smooth.
Recently I've open sourced a JavaScript library that may help your with your question. It and published under http://transitionjs.org
It allows you to quickly apply CSS transition on elements from JavaScript without editing your CSS. For example, to execute CSS transition you mentioned in your question you would simply write:
transitionjs.begin(element, 'left 0px 100px 1s ease-in');
note: you will need to provide the start and end values of the transition.
I'm using CSS Filters to modify images on the fly within the browser. These work perfectly in Internet Explorer, but aren't supported in Firefox.
Does anyone know what the CSS Filter equivalent for these is for Firefox? An answer that would work cross browser (Safari, WebKit, Firefox, etc.) would be preferred.
<style type="text/css">
.CSSClassName {filter:Invert;}
.CSSClassName {filter:Xray;}
.CSSClassName {filter:Gray;}
.CSSClassName {filter:FlipV;}
</style>
Update: I know Filter is an IE specific feature. Is there any kind of equivalent for any of these that is supported by Firefox?
Please check the Nihilogic Javascript Image Effect Library:
supports IE and Fx pretty well
has a lot of effects
You can find many other effects in the CVI Projects:
they are also JS based
there's a Lab to experiment
Good Luck
Could you give us a concrete example of what exactly you're trying to do? You'd probably get fewer "Your brower sux" responses and more "How about trying this different approach?" ones.
Normally CSS is used to control the look and feel of HTML content, not add effects or edit images in clever ways. What you're trying to do might be possible using javascript, but a behavior-oriented script still probably isn't very well suited for the kind of tweaking you want to do (although something like this is a fun and very inefficient adventure in CSS / JS tomfoolery).
I can't imagine a scenario when you would need the client to perform image tweaking in real-time. You could modify images server-side and simply reference these modified versions with your CSS or possibly Javascript, depending on what you're doing exactly. ImageMagick is a great little command-line tool for all the image effects you would ever need, and is pretty simple to use by itself or within the server-side language of your choice. Or if you're using PHP, I believe PHP's GD library is pretty popular.
There are no equivalents in other browsers. The closest you could get is using a graphics library like Canvas and manipulating the images in it, but you'd have to write the manipulations yourself and they'd require JavaScript.
filter is an IE-only feature -- it is not available in any other browser.
SVG filters applied to HTML content.
Only works in Firefox 3.1 and above, though I think Safari is heading in the same direction.
None that I know of. Filter was an IE only thing and I don't think any other browser has followed with similar functionality.
What is there a specific use case you need?
I'm afraid that you are pretty much out of luck with most of the cross-browser filter-type functionality. CSS alone will not allow you to do most of these things. For example, there is no way to invert an image cross-browser just using CSS. You will have to have two different copies of the image (one inverted) or you could try using Javascript or maybe go about it a completely different way, but there is no simple solution solely in CSS.
There are filters, such as Gaussian Blur et al in SVG, which is supported natively by most browsers except IE.
Pure thought experiment here, you could wrap your images in an SVG object on the fly with javascript and attempt to apply filters to them.
I doubt this would work for background images, though perhaps with alot of clever positioning it could work.
It's unlikely to be a realistic solution. If you don't want to permanently modify your source images, Rudi has the best answer, using server side tools to apply transformations on the fly (or cached for performance) will be the best cross browser solution.
This is a very very old question but css has updated to now support filters. Read more about it at
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Syntax
With a function, use the following:
filter: <filter-function> [<filter-function>]* | none
For a reference to an SVG element, use the following:
filter: url(svg-url#element-id)
Not really, and hopefully there never will be. It's not a web standard CSS feature for the reason that you're using CSS to format the webpage, not the browser itself. The day that other web designers and developers think they should style my browser how they wish and are then do so is the day I stop visiting their pages (and I say this as a front end web guy).