By any chance do any CSS wizards here (@nader.chinichian or @victordcq ?) know how to take an icon and get it to move horizontally in an animation inside of its container?
The other thing I would really like to do is also get it to repeat, so its like an endless moving <<<<< through the box.
EDIT: Kind of like this, except not with me just dragging a repeated icon to the left… lol
You could set up a keyframe animation, either by declaring it in one of your theme CSS files, or by injecting it in through a new styleclass’s background image value:
}@keyframes moveLeft {0% {left: 100%;}50% {left: 50%;}100% {left: 0%;}}{
Then, just create an “animation” property within the style of your icon:
The animation property’s shorthand I’m using here is {keyframe name} {animation duration} {iteration count}
Note that this does not always render correctly for me in the designer, you would better off testing it in an actual Perspective session. Obviously, you’ll want to modify the keyframe steps until the animation is what you’re looking for.
Edit: You know, I tested this in a coordinate container and it was working fine, but after attempting to get it to scroll like a constant marquee in a flex row container I was having some difficulty getting the expected behavior. You’ll likely have to play with it a little bit if that is your end goal.
Should be able to use the following
Put the following in your css.
@keyframes animatedBackground {
0% { background-position: 0 0; }
100% { background-position: -300px 0; }
}
For sake of performance you can use image background with following setting
Other wise like other mentioned use animation property in XY coordinate containers.
Out of curiosity, between the image loop, or something like a gif.
Do you have any performance recommendations for putting something like Conveyors on a P&ID?
I really liked the idea of using pipes, and just styling them to look like a conveyor, but that was before I realized I couldn’t style individual pipes outside of color. That would have been nice because it would have provided the SVG to the client as one large SVG, instead of the back and forth of many smaller ones.
Of course gif files are faster if you don’t need to scale the objects. In the case of conveyor you need to scale via X axis so I like to use SVG and animated the stroke dashed offset for it
