Jump to content
Please Use CODE Tags

Animation does not work?

stefanmz
By stefanmz
in Programming
 Share
Go to solution Solved by ARTHURX64WB,
1 minute ago, stefanmz said:

yeah but that will make it invisible in the beginning of the animation and then it will become visible go and then become invisible again,right?(the animated bullet)because that's what I want

The javascript I added makes the bullet invisible at first. You need to set a condition to remove the .hidden_object class like an event like clicking a button or press a key on the keyboard. To make it invisible again, use setTimeOut to add the class back in once the time expires. The setTimeOut function will be triggered by the event.

 

Side note: I haven't really tried animating things with pure CSS, I think you will have a better control with animation timings in JavaScript. You can make changes to the visual effects by playing around with adding and removing classes that correspond to a CSS rule like what I did.

Posted

ok can you tell me why the visibility of the animated bullet is always visible when I set it to not be in the beginning???!!! 

this is annoying there is no reason this shouldn't work. 

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="Styles.css">
	<title>Avatar animation</title>
</head>
<body>
	<div id="container">
		<img id="avatar" src="https://i.imgur.com/n3PhiOA.png">
		<img id="bullet_animation_style" src="https://i.imgur.com/njRj5ve.png">
	</div>
</body>
</html>


*{
	margin: 0;
	padding: 0;
}
body{
	background: rgba(221,226,220,255);
}
img#bullet_animation_style {
    width: 6% !important;
    position: absolute;
    top: 60%;
    left: 69%;
    animation-name: firing;
    animation-duration: 4s;
   /* animation-delay: 2s;*/
    animation-timing-function: ease-in;
    visibility: hidden;
    animation-iteration-count: infinite;
}
@keyframes firing{
	0%{left: 44%;visibility: hidden;}
	50%{left: 44%;visibility: visible;}
	100%{left: 95%;visibility: hidden;}
}
#container{
	animation-name: movement;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    width: 40%;
}
@keyframes movement{
	0%{position: absolute;left: 0;}
	100%{position:absolute;left: 75%;}
}

 

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

I don't know what you expect this to do but half of this isn't even interpreted by the browser. Did you forget to mention some context?

Don't ask to ask, just ask... please 🤨

sudo chmod -R 000 /*

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

I don't know what you expect this to do but half of this isn't even interpreted by the browser. Did you forget to mention some context?

hmm what do you mean?

 

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

Works fine with me. I see a dude firing a bullet while charging forward. You should use Javascript and make it invisible.

 

Is this what you're looking for?

  


<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
	<link rel="stylesheet" type="text/css" href="Styles.css">
	<title>Avatar animation</title>
    <style>
        
*{
	margin: 0;
	padding: 0;
}
body{
	background: rgba(221,226,220,255);
}
img#bullet_animation_style {
    width: 6% !important;
    position: absolute;
    top: 60%;
    left: 69%;
    animation-name: firing;
    animation-duration: 4s;
   /* animation-delay: 2s;*/
    animation-timing-function: ease-in;
    visibility: hidden;
    animation-iteration-count: infinite;
}
@keyframes firing{
	0%{left: 44%;visibility: hidden;}
	50%{left: 44%;visibility: visible;}
	100%{left: 95%;visibility: hidden;}
}
#container{
	animation-name: movement;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    width: 40%;
}
@keyframes movement{
	0%{position: absolute;left: 0;}
	100%{position:absolute;left: 75%;}
}

.hidden_object{
    visibility: hidden;
    display: none;
}
    </style>
</head>
<body>
	<div id="container">
		<img id="avatar" src="https://i.imgur.com/n3PhiOA.png">
		<img id="bullet_animation_style" src="https://i.imgur.com/njRj5ve.png">
	</div>
</body>
</html>

</head>
<body>
    
    <script>
       
        $(document).ready(function(){
            let b = document.getElementById('bullet_animation_style')
            b.classList.add('hidden_object')
        })
    </script>
</body>
</html>

 

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

Works fine with me. I see a dude firing a bullet while charging forward. You should use Javascript and make it invisible.

 

Is this what you're looking for?

  


<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
	<link rel="stylesheet" type="text/css" href="Styles.css">
	<title>Avatar animation</title>
    <style>
        
*{
	margin: 0;
	padding: 0;
}
body{
	background: rgba(221,226,220,255);
}
img#bullet_animation_style {
    width: 6% !important;
    position: absolute;
    top: 60%;
    left: 69%;
    animation-name: firing;
    animation-duration: 4s;
   /* animation-delay: 2s;*/
    animation-timing-function: ease-in;
    visibility: hidden;
    animation-iteration-count: infinite;
}
@keyframes firing{
	0%{left: 44%;visibility: hidden;}
	50%{left: 44%;visibility: visible;}
	100%{left: 95%;visibility: hidden;}
}
#container{
	animation-name: movement;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    width: 40%;
}
@keyframes movement{
	0%{position: absolute;left: 0;}
	100%{position:absolute;left: 75%;}
}

.hidden_object{
    visibility: hidden;
    display: none;
}
    </style>
</head>
<body>
	<div id="container">
		<img id="avatar" src="https://i.imgur.com/n3PhiOA.png">
		<img id="bullet_animation_style" src="https://i.imgur.com/njRj5ve.png">
	</div>
</body>
</html>

</head>
<body>
    
    <script>
       
        $(document).ready(function(){
            let b = document.getElementById('bullet_animation_style')
            b.classList.add('hidden_object')
        })
    </script>
</body>
</html>

 

yeah but that will make it invisible in the beginning of the animation and then it will become visible go and then become invisible again,right?(the animated bullet)because that's what I want

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

yeah but that will make it invisible in the beginning of the animation and then it will become visible go and then become invisible again,right?(the animated bullet)because that's what I want

The javascript I added makes the bullet invisible at first. You need to set a condition to remove the .hidden_object class like an event like clicking a button or press a key on the keyboard. To make it invisible again, use setTimeOut to add the class back in once the time expires. The setTimeOut function will be triggered by the event.

 

Side note: I haven't really tried animating things with pure CSS, I think you will have a better control with animation timings in JavaScript. You can make changes to the visual effects by playing around with adding and removing classes that correspond to a CSS rule like what I did.

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

The javascript I added makes the bullet invisible at first. You need to set a condition to remove the .hidden_object class like an event like clicking a button or press a key on the keyboard. To make it invisible again, use setTimeOut to add the class back in once the time expires. The setTimeOut function will be triggered by the event.

 

Side note: I haven't really tried animating things with pure CSS, I think you will have a better control with animation timings in JavaScript. You can make changes to the visual effects by playing around with adding and removing classes that correspond to a CSS rule like what I did.

ok thanks!

 

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

×