Welcome to Code Forum!

Join a community that supports you and your coding journey from day one. We strive to be a friendly, supportive community that empowers everyone to be better developers. By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.

    GIF shows where to locate </> in the thread and or post editor toolbar.
    To learn more about how to use our BBCode feature, review our "How to post your code into threads" here.

    Thank you, Code Forum.

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

Edrol97

Edrol97

Silver Coder
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.
How would I incorporate both animations on the one graphic?
 
Solution
tomliv
@Edrol97

HTML: 
<!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...
Sort by date Sort by votes
JosiahMaybe said:
Keyframes, transitions, and transformations probably. Would you like more documentation? X E.
Click to expand...
What I have already in my CSS


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;
  }
}
 
Upvote 0 Downvote
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com 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.
 
Upvote 0 Downvote
JosiahMaybe said:
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
www.w3schools.com

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com 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.
Click to expand...
Ideally yes, because I want both to happen simultaneously.
 
Upvote 0 Downvote
@Edrol97

HTML: 
<!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>
 
Last edited:
Upvote 1 Downvote
Solution

New Threads

Latest posts

Share this page

Buy us a coffee!

Buy me a coffee.
Code Academy Advertisement
DataCamp Advertisement

About Us

Code Forum is a community platform where coding enthusiasts can connect with other developers, engage in discussions, ask for help, and share their knowledge with a supportive community. It's a perfect place to improve your coding skills and to find a community of like-minded individuals who share your passion for coding.

Site links

Stay Connected

Back
Top Bottom