Both spinning (rotating) and moving an image from side to side

[Edrol97]

Hi,

I've added an animation to a graphic on my website and want to make it spin as well as move from side to side. This is a video of how it looks on my current dev site:

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

How would I incorporate both animations on the one graphic?

 

[JosiahMaybe]

Keyframes, transitions, and transformations probably. Would you like more documentation? X E.

 

[Edrol97]

Keyframes, transitions, and transformations probably. Would you like more documentation? X E.

What I have already in my CSS

#peace img {
  top: 100%;
  position: relative;
  animation: linear infinite;
  animation-name: run;
  animation-duration: 10s;
  overflow-x: hidden;
}
@keyframes run {
  0% {
    left: 0;
  }
  50% {
    left: calc(100% - 100px);
  }
  100% {
    left: 0;
  }
}

 

[JosiahMaybe]

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

www.w3schools.com

CSS transform property

Rotate, skew, and scale three different <div> elements.

www.w3schools.com

Looks like you should add a transition for your properties so it is smooth and also have a transform of a rotation so that it rotates. Do you want further explanation? X E.

 

[Edrol97]

CSS Transitions

CSS transitions allows you to change property values smoothly, over a given duration.

www.w3schools.com

CSS transform property

Rotate, skew, and scale three different <div> elements.

www.w3schools.com

Looks like you should add a transition for your properties so it is smooth and also have a transform of a rotation so that it rotates. Do you want further explanation? X E.

Ideally yes, because I want both to happen simultaneously.

 

[tomliv]

@Edrol97

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            animation: linear infinite, linear infinite;
            animation-name: run, rotate;
            animation-duration: 10s, 3s;
        }
        @keyframes run {
            0% {
                left: 0;
            }
            50% {
                left: calc(100% - 100px);
            }
            100% {
                left: 0;
            }
        }
        @keyframes rotate {
            0% {
                rotate: 0deg;
            }
            50% {
                rotate: 180deg;
            }
            100% {
                rotate: 360deg;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>