#100daysofCSS challenge

HTML-CSS
#1

This is a challege from #100daysofCSS which was to make a swirl ,but I completely failed at it,the swirl is not very fast and indeed slow.

#2

If you think it is too slow, change the time of the animation

#3

But what if I want a to and fro motion

#4

There is animation-duration property you can use.

https://www.w3schools.com/cssref/css3_pr_animation-duration.asp

#5

Yeah ok but I am not able to make a to and fro motion

#6

Take a look at animation-direction properties in W3 / Mozilla CSS schools.

Also, for an easy back-and-forth motion, add a 50% keyframe for the furthest distance, then use 100% to return the image to it’s starting location.

So for example:

#ball_1 {
	background-color:#1ABC9C  ;
	height:20px;
	width:20px;
	border-radius:50%;
	margin-bottom:10px;
	animation-delay:0s;
        animation-direction: alternate;
	animation:roll 10s infinite ;
}

@keyframes roll {

    50% {
	transform:translatex(20px);
		
	}
	100% {
	transform:translatex(0px);
		
	}
#7

THanks for this,it worked,now you can view it but still some gross,better tell me what to do

#8

Your middle of page (starting) position needs to be 0% and 100%

You may want to use 25% for the right position and 75% for the left position, it should give a more natural feeling there

#9

Can you go to the pen and modify it and then paste it here

#10

No, I can’t

I see a jump in your code.
You have for example the first one that at 50% go to 30px and at 100% go to -30px
And then i see a jump when the ball returns to starting point

If you edit it in the way to have
0% - 0
25% - 30px
75% - -30px
100% - 0

It will not have that jump

If you want a smooth infinite loop your starting and ending position must be the same

#11