This time I called it: pulse and the timeframe is 3 seconds. The second animation animates the power button. You can play with the numbers yourself to change the actual animation. In this case, it scales at 0, 7, 10,12,16,19, and 25% of the timeline of our animation. In this case, we use the scale3d function that scales our image on the x, y, and z-axis. Within the boing keyframes, we define what should happen at certain percentages of the animation time. For this, we create the line for the boing animation that we named before. Now we have to define the animation itself. The transform-origin shows that it transforms on the x-axis at 50% and on the y-axis at 90% of the image. In this case, I named my animation “boing”, it lasts 3 seconds and will repeat infinitely. You can point to the specific chip with the code mushroom-template-chip:nth-child(1)$: where the number represents the position of the chip in the list.Īfter that, we start with ha-icon and define the animation. The House animationīelow card_mode we see the line: style, and after that, the styles for each element are defined. This is still business as usual, but if we scroll down, you see the card_mod line. Now we see all the chips that are defined in the chips card. If you click on the pencil next to a chip, you won’t see the CSS, so we are going to click on the Show Code Editor link. We need to use Template chips for this because we are going to add CSS in the YAML code for each chip. Click on the three dots in the right upper corner.Īs you can see, all chips are Template chips.and a Motion Detector chip that flashed the motion sign.Let’s start with explaining the animated chips icons:Īs you can see I created 5 chips on this page: You might as well download and install the dashboard first on your setup of Home Assistant so that you can follow along and alter the code to your needs. You can download this dashboard via the Ko-Fi link in the description below. I am going to explain how I’ve set up the animated icons on this tutorial dashboard. Again, if you haven’t used the Mushroom Cards before, you can also install these through HACS. I already prepared some animated cards and will explain how I created the animations. Now that Card-Mod is installed, we can start by changing our dashboard so that it has animated cards. Go to Explore and Download Repositories.To install card-mod, we are going to HACS.Let’s first install the card-mod integration. If you do not have HACS installed yet, I created this easy-to-follow video on how to do that. To use CSS in cards, you need a HACS integration which is called card-mod. You can change the looks of cards on your dashboard by using CSS. And, you can also download the code I used in this video via the link in the description of this video below. I will try to explain how this works as well as I can so that you can set up your own animations. To create Animated Mushroom cards, you need to understand how CSS works and that might be challenging. This isn’t going to be an easy-to-digest video. You will find a link to examples that he created in the description below. This way, you make sure that I can keep creating these videos for you!įirst of all, I have to give credit to Rhys, who came up with the idea and a lot of inspiration for various types of animations. You can animate the Mushroom cards and icons in various ways to spice up your dashboard.īut, before we start, please subscribe to my channel and hit the thumbs-up button for this video. I’m not going to deep dive into mushroom cards today, but I’m going to show something that might just blow your mind! And that is Animated Mushroom Cards! This is so cool. You can install Mushroom cards using HACS. If you’re not using Mushroom Cards yet, then check these out. Mushroom cards came into our lives a couple of months ago and that changed the whole way of creating beautiful dashboards in Home Assistant. Click here to watch the video Introduction of the Animated Dashboard
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |