# Fade in and out

**URL:** <https://forum.inductiveautomation.com/t/fade-in-and-out/52639>\
**Category:** Ignition\
**Created:** [November 2, 2021, 6:27pm UTC](https://forum.inductiveautomation.com/t/fade-in-and-out/52639 "2021-11-02T18:27:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![mojoeswa](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@mojoeswa](https://forum.inductiveautomation.com/u/mojoeswa)\
**Post date:** [November 2, 2021, 6:27pm UTC](https://forum.inductiveautomation.com/t/fade-in-and-out/52639/1 "2021-11-02T18:27:18Z")

</div>

I want to fade page loading with CSS animation, does anyone know how to do that? I really like the animation that Vertech uses in build-a-thon 2021 to show what resources are included in their package. I have downloaded the resources from Ignition Exchange and I think I found the class “magictime vanishIn”. I have tried to add the class to my page, but nothing happens …  
I’m new to css, but if any helpful soul want to answer, I’m grateful

---

<div class="post-metadata">

**Author:** ![mojoeswa](https://avatars.discourse-cdn.com/v4/letter/m/45deac/32.png) [@mojoeswa](https://forum.inductiveautomation.com/u/mojoeswa)\
**Post date:** [November 2, 2021, 9:01pm UTC](https://forum.inductiveautomation.com/t/fade-in-and-out/52639/2 "2021-11-02T21:01:41Z")

</div>

Think I solved it myself, just needed to put 0 on opacity. Absolutely wonderful animation

---

<div class="post-metadata">

**Author:** ![SKA](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ska/32/29528_2.png) [@SKA](https://forum.inductiveautomation.com/u/SKA)\
**Post date:** [November 3, 2021, 6:59am UTC](https://forum.inductiveautomation.com/t/fade-in-and-out/52639/3 "2021-11-03T06:59:34Z")

</div>

Do remember that the end user might hate unneccesary animation that are useless for the operation and usabillity of a machine/function.

---

<div class="post-metadata">

**Author:** ![flavien](https://avatars.discourse-cdn.com/v4/letter/f/f475e1/32.png) [@flavien](https://forum.inductiveautomation.com/u/flavien)\
**Post date:** [April 20, 2023, 2:48pm UTC](https://forum.inductiveautomation.com/t/fade-in-and-out/52639/4 "2023-04-20T14:48:14Z")

</div>

> [@mojoeswa](#):
>
> magictime vanishIn

Hi,

Where did you found this class ? How Can I install it in Ignition ?

---

<div class="post-metadata">

**Author:** ![dkhayes117](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dkhayes117/32/68344_2.png) [@dkhayes117](https://forum.inductiveautomation.com/u/dkhayes117)\
**Post date:** [April 20, 2023, 3:13pm UTC](https://forum.inductiveautomation.com/t/fade-in-and-out/52639/5 "2023-04-20T15:13:23Z")

</div>

I'm not completely sure, but it may be this one

> **[Ignition Exchange](https://inductiveautomation.com/exchange/2155/overview)**
>
> Discover, share, and download community made Ignition resources in collaboration with your organization or the Ignition community.

---

<div class="post-metadata">

**Author:** ![jlandwerlen](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@jlandwerlen](https://forum.inductiveautomation.com/u/jlandwerlen)\
**Post date:** [April 20, 2023, 4:37pm UTC](https://forum.inductiveautomation.com/t/fade-in-and-out/52639/6 "2023-04-20T16:37:03Z")

</div>

I would use the new stylesheets. [Style Classes - Ignition User Manual 8.1 - Ignition Documentation](https://docs.inductiveautomation.com/display/DOC81/Style+Classes#StyleClasses-EnablingtheAdvancedStylesheet)

Example, this doesn't fade, but rather an ease in.

```auto
/* Nice transition for views */
@keyframes view-ease-in {
0% {
   transform: scale(0);
  }
  100% {
   transform: scale(1);
  }
}

```

Example, view:

```auto
{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 476,
      "width": 560
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "height": 0.4202,
          "width": 0.3571,
          "x": 0.3054,
          "y": 0.2647
        },
        "props": {
          "style": {
            "backgroundColor": "#21E325",
            "borderBottomLeftRadius": 360,
            "borderBottomRightRadius": 360,
            "borderStyle": "solid",
            "borderTopLeftRadius": 360,
            "borderTopRightRadius": 360,
            "borderWidth": 1
          }
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "aspectRatio": "560:476",
      "mode": "percent",
      "style": {
        "animation": "view-ease-in 0.5s"
      }
    },
    "type": "ia.container.coord"
  }
}

```