Jump to content
Please Use CODE Tags

How to animate a rolling coin in css?

Hip
By Hip
in Programming
 Share
Posted

Hey guys,

 

so far I know how to animate a coin that moves from left to right, but I want it to spin 360 degrees while moving from left to right.

Can someone tell me how to do this?

 

This is the code so far in css: 

html 	{
		background: #d2d2d2
		}
		
.coin	{
			
		}
		
.coin img	{
			animation-name: roll;
			animation-duration: 8s;
			}

				
@keyframes roll	{
					from    {transform: translateX(0)}
					to		{transform: translateX(2300px)}
					}

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You can use  

transform: rotateY(<[0-360]>deg)

but it will have no volume (like paper)

🙂

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
36 minutes ago, duncannah said:

You can use  


transform: rotateY(<[0-360]>deg)

but it will have no volume (like paper)

What do you mean by volume?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
17 minutes ago, duncannah said:

It's flat basically

That's no problem for now :D

 

Do I have to set a new keyframe for 

{transform: rotateY(<[0-360]>deg)}

Not sure if I got it right, this doesn't work:

  

html 	{
		background: #d2d2d2
		}
		
.coin	{
			
		}
		
.coin img	{
			
			animation-name: roll, rotation;
			animation-duration: 8s, 8s;
			
			}

				
@keyframes roll	{
					from    {transform: translateX(0)}
					to		{transform: translateX(2300px)}
					}
					
@keyframes rotation	{
							{transform: rotateY(<[0-360]>deg)}
					}

Can you tell me how to make it otherways too?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

You can run multiple animations by separating them by a comma.

 

https://stackoverflow.com/questions/26986129/play-multiple-css-animations-at-the-same-time

  

.coin {
    animation: move 2s, rotateY 3s;
}

@keyframes move {
    from { transform: translateX(0); }
    to {transform: translateX(1000px); }
}

@keyframes rotateY {
    from { transform: rotateY(0rad); }
    to { transform: rotateY(3.142rad); }
}

 

Specs: i7-3770K | Asus R9 290X | 32GB DDR3 | GA-Z77-UD5H | RM 750x | Define R5 Arctic White | macOS 10.14.5 & Windows 10

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
54 minutes ago, Joonikko said:

You can run multiple animations by separating them by a comma.

 

https://stackoverflow.com/questions/26986129/play-multiple-css-animations-at-the-same-time

  


.coin {
    animation: move 2s, rotateY 3s;
}

@keyframes move {
    from { transform: translateX(0); }
    to {transform: translateX(1000px); }
}

@keyframes rotateY {
    from { transform: rotateY(0rad); }
    to { transform: rotateY(3.142rad); }
}

 

What does "rad" mean? And why 3.142rad?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
19 minutes ago, Hip said:

What does "rad" mean? And why 3.142rad?

~3.142 radian is the value of Pi, a constant ratio of a circle's circumference to to its diameter. Simply meaning it will fully roll once. You can also use degrees to define the amount of rotation.

 

- http://mathworld.wolfram.com/Radian.html
- https://en.wikipedia.org/wiki/Pi

- https://en.wikipedia.org/wiki/Degree_(angle)

Specs: i7-3770K | Asus R9 290X | 32GB DDR3 | GA-Z77-UD5H | RM 750x | Define R5 Arctic White | macOS 10.14.5 & Windows 10

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
5 minutes ago, Joonikko said:

~3.142 radian is the value of Pi, a constant ratio of a circle's circumference to to its diameter. Simply meaning it will fully roll once. You can also use degrees to define the amount of rotation.

 

- http://mathworld.wolfram.com/Radian.html
- https://en.wikipedia.org/wiki/Pi

- https://en.wikipedia.org/wiki/Degree_(angle)

I'd stay with degrees then :D

 

Can you tell me how to solve it with the method @duncannah told me?

I can't figure out how to put this code together >.<

 

I have this now: 

html 	{
		background: #d2d2d2
		}
		
.coin	{
			
		}
		
.coin img	{
	
			animation-name: roll, rotation;
			animation-duration: 8s, 8s;
			
			}

				
@keyframes roll	{
					from    {transform: translateX(0)}
					to		{transform: translateX(2300px)}
					}
					
@keyframes rotation	{
					from	{transform: rotateZ(0deg)}
					to		{transform: rotateZ(360deg)}
					}

But now only the coin spins 360 degrees around and doesn't move from left to right lol

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Seems to be easier to apply horizontal movement on the parent div and then rotation on the image.

 

HTML

  

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Document</title>

</head>

<body>
    <div class="coin">
        <img src="img/coin.jpg" alt="">
    </div>
</body>

</html>

CSS 

html {
    background: #d2d2d2;
}

.coin {
    width: 100px;
    animation: moveX 8s;
}

.coin img {
    width: 100px;
    animation: rotation 8s;
}

@keyframes moveX {
    from {
        transform: translate(0px);
    }

    to {
        transform: translate(600px);
    }
}

@keyframes rotation {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);

    }
}

Edit: I also suggest a different naming scheme for animations, functions etc. Descriptive names are easier to understand, require less documentation and reduce current & future headaches. What does the translate(600px) do? It moves it 600 pixels horizontally from left to right on the X axis, so naming the animation moveX or moveX600px is better and simpler.

Specs: i7-3770K | Asus R9 290X | 32GB DDR3 | GA-Z77-UD5H | RM 750x | Define R5 Arctic White | macOS 10.14.5 & Windows 10

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
4 hours ago, Joonikko said:

Seems to be easier to apply horizontal movement on the parent div and then rotation on the image.

 

HTML

  


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Document</title>

</head>

<body>
    <div class="coin">
        <img src="img/coin.jpg" alt="">
    </div>
</body>

</html>

CSS 


html {
    background: #d2d2d2;
}

.coin {
    width: 100px;
    animation: moveX 8s;
}

.coin img {
    width: 100px;
    animation: rotation 8s;
}

@keyframes moveX {
    from {
        transform: translate(0px);
    }

    to {
        transform: translate(600px);
    }
}

@keyframes rotation {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);

    }
}

 

That's exactly how I wanted it to work!! Thank you!

 

I also found this on the link you've sent me before:

http://jsfiddle.net/rnrlabs/x9cu53hp/

 

Can you tell me what's wrong in my code trying this method? 

<!DOCTYPE html>

<html>
	<head>
		<title>Coin Pag.es</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style/stylesheet.css"/>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
		<script src="https://cdn.rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
	</head>
	
	<body>
		<div class="coin">
			<img class="image" src="images/coin.png">
		</div>
		
		
	</body>


</html>
html 	{
		background: #d2d2d2
		}
		
.coin	{
			animation: roll 8s;
	
		}
		
.image	{
			animation: rotation 8s;
			
		}
		

				
@keyframes roll	{
					from    {transform: translateX(0)}
					to		{transform: translateX(2300px)}
					}
					
@keyframes rotation	{
					from	{transform: rotateZ(0deg)}
					to		{transform: rotateZ(360deg)}
					}

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I'm not really sure what you mean. Are you trying to make it infinitely spin or?

 

Anyway, here are some tutorials and sites that I would recommend:

 

- https://learn.shayhowe.com/html-css/

- https://www.codecademy.com/learn/learn-html

- https://ilovecoding.org/courses/htmlcss

- https://hackr.io/tutorials/learn-html-5

- https://css-tricks.com/

- https://www.w3schools.com/

- https://teamtreehouse.com/library/html

- https://developer.mozilla.org/en-US/

- http://htmldog.com/

- https://blog.tbhcreative.com/2015/08/10-best-practices-in-html.html

- https://github.com/hail2u/html-best-practices

 

Also I would install a good text editor such as Visual Studio Code and install some beautifier/autoformatter to format & indent the code properly.

Specs: i7-3770K | Asus R9 290X | 32GB DDR3 | GA-Z77-UD5H | RM 750x | Define R5 Arctic White | macOS 10.14.5 & Windows 10

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 hour ago, Joonikko said:

I'm not really sure what you mean. Are you trying to make it infinitely spin or?

 

Anyway, here are some tutorials and sites that I would recommend:

 

- https://learn.shayhowe.com/html-css/

- https://www.codecademy.com/learn/learn-html

- https://ilovecoding.org/courses/htmlcss

- https://hackr.io/tutorials/learn-html-5

- https://css-tricks.com/

- https://www.w3schools.com/

- https://teamtreehouse.com/library/html

- https://developer.mozilla.org/en-US/

- http://htmldog.com/

- https://blog.tbhcreative.com/2015/08/10-best-practices-in-html.html

- https://github.com/hail2u/html-best-practices

 

Also I would install a good text editor such as Visual Studio Code and install some beautifier/autoformatter to format & indent the code properly.

I created it like this:

  

<!DOCTYPE html>

<html>
	<head>
		<title>Coin Pag.es</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="style/style2.css"/>
		
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
		<script src="https://cdn.rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.js"></script>
	</head>
	
	<body>
		<div class="coin">
		<img class="image image2" src="images/coin.png">
		<div>
			
	</body>


</html>
.image {
   
    animation: rotation 8s ;    
}

.coin {

   animation: roll 8s;
}


@keyframes roll	{
					from    {transform: translateX(0)}
					to		{transform: translateX(2300px)}
					}
					
@keyframes rotation	{
					from	{transform: rotateZ(0deg)}
					to		{transform: rotateZ(360deg)}
					}

 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×