Style for (Icon) Rotation

Ignition
,
1

I want to animate an icon component to rotate. I think I should be able to get this done with a CSS style. I created a blank style called Rotation and added the following to my CSS stylesheet:

@keyframes runRotate {
	from {transform: rotate(0deg);}
	to {transform: rotate(-359deg);}
}

.psc-Rotation{
	-webkit-animation: runRotate 2s linear infinite;
}

To apply the style, I had to add the "classes" section to the icon's style group (why it's not there to begin with is odd, but adding it manually works). But, after applying the style the icon is not rotating.

1 Like
2

One possible method
IconRotate.zip (6.5 KB)

3

Seems to be working, but only on the view (yours) I imported.
If I apply the same

	animation: ia_symbolComponent__animate--rotate linear infinite;
	animation-duration: 2000ms;
	transform-origin: center;

styles to my icon, whether directly or using the stylesheet, it's not working for me

4

There is nothing special about my View, this method doesn't require a theme or stylesheet. Not sure what's going on, maybe create a new View and start over.

5

Using the supplied style rules, and after placing classes: Rotation into my style object, my Icon immediately began rotating in place as expected (8.1.24).

6

8.1.23, my stylesheet method is not working:

image
image

.psc-Spin{
	animation: ia_symbolComponent__animate--rotate linear infinite;
	animation-duration: 2000ms;
	animation-direction: reverse;
}

Alarms/Icons/Spin is an empty style

7

Sorry for the confusion, but I meant using the original rules you had supplied in the first post my Icon was working correctly. I suspect you're running into a (minor) known issue where changes to the stylesheet resource are not always picked up by View resources until either the project is saved, or the View is closed and re-opened. This is because the View obtains the stylesheet when the View is opened, and doesn't listen for changes appropriately. Using the original rule from the first post, try saving your project again and see if it works.

Also, as a side-note:
If you define a rule for a selector in stylesheet.css, and assign that "class" to the object, you actually don't even need to make a Style Class in Perspective; the defined classname ("Spin" in your example) will be applied to the component regardless of the existence of a matching Perspective Style.

In the following screenshot, you can see I have no RedStroke Style resource.

Screenshot 2023-01-30 at 2.01.03 PM
Screenshot 2023-01-30 at 2.01.03 PM1960×706 80.9 KB

1 Like
8

The update must've been the issue

Thanks for the tip!

9

Hello Everyone,

Where can I find this kind of information/script? How I can find the Key value combination that can be used like this?

10

There are so many keys in CSS that IA doesn't document them itself. Try any on-line CSS training resource you like.

11

Thank you for the reply @pturmel, can you please tell me, how we will know the "ia_symbolComponent" we need to use?
little bit confused in those areas, how we will find each object, and how we need to give, Sorry I'm a beginner in this part. Can you please help?

12

Right click, inspect, to open up dev console in the browser. Example from pump,
image

2 Likes
13

Thank you very much, Now it's clear, Any suggestions for taking a course on CSS @pturmel @jlandwerlen , where it will be better?

14

There are good resources listed in this thread:
• How to learn perspective the right way

Here is a CSS Cheatsheet:
• CSS CheatSheet

For fun, there are some CSS training games listed in this post:
• Comprehensive list of programming games

2 Likes
15

Thanks , I will have a look at those.

1 Like