CSS animation change

[pctechtv]

I am helping with a website. What the owner want to do is take the CSS animation and change it. Currently it rotates, kind of in a circle. What we have been trying to figure out is how to take what is here and modify it so it just moves on a straight plain and a few pixels (20px) and then move back. We would also like to it to loop this. Here is what we have. Thanks

-webkit-animation-name: rotate;
-webkit-animation-duration:700s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;

[Beverleyh]

The animation-name property in the first line is referencing an animation called “rotate”, so you’ll have @keyframe declarations elsewhere in your CSS that define what happens as part of this “rotate” animation. This is what you should edit.

But before you can do that, you’ll need to do some research on keyframe animations – here’s a good place to start https://css-tricks.com/almanac/properties/a/animation/

You can also take inspiration from elsewhere on the web – Animate.css provides lots of examples to inspect and take ideas/cues from https://daneden.github.io/animate.css/

Good luck with your project.

[Author]

Posts