Jump to content
Please Use CODE Tags

Logo animation in CSS doesn't move

Hip
By Hip
in Programming
 Share
Go to solution Solved by Joonikko,

You don't have any unit defined for the translateX

  

transform: translateX(2300px)

 

Posted

Hey guys,

 

I want a logo to move from left to right, but it somehow doesn't work.

Even though I use the same code as in a tutorial video on Youtube.

 

 

html: 

<!DOCTYPE html>

<html>
	<head>
		<title>test</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="logo">
			<img src="images/ogo1.png">
		</div>
		
		
	</body>


</html>

css: 

html 	{
		background: #d2d2d2
		}
		
		
.logo img	{
		
			animation-name: rollen;
			animation-duration: 5s;
			}

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

Something is wrong in the CSS file but  what ??

Link to comment
Share on other sites
Link to post
Share on other sites
Posted 
<img src="images/ogo1.png">

You sure that is the correct png name? I think it should be logo1.png.

 

Can't really tell what problem you're having other than "it doesn't work". Haven't linked the YT tutorial, nor have you described what does and does not show up.

 

 

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

<img src="images/ogo1.png">

You sure that is the correct png name? I think it should be logo1.png.

 

Can't really tell what problem you're having other than "it doesn't work". Haven't linked the YT tutorial, nor have you described what does and does not show up.

 

 

Yes it's correct :-D

 

 

This is the tutorial (it's in german): 3:08

The picture should move in an animation from left to right like the car in this video.

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

Yes it's correct :-D

 

 

This is the tutorial (it's in german): 3:08

The picture should move in an animation from left to right like the car in this video.

Fair enough, and I understand why you're trying to learn this - probably for knowledge.

 

But why not use adobe animate?

 

 

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

Fair enough, and I understand why you're trying to learn this - probably for knowledge.

 

But why not use adobe animate?

 

 

I want to learn CSS :-D

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

You don't have any unit defined for the translateX

  

transform: translateX(2300px)

 

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

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

×