CSS and HTML elements drifting gracefully from the right to the left

Can someone help me change the floating direction in this example? It's currently set to float from bottom to top, but I want it to float right and left instead.

I've been adjusting the numbers in the CSS code provided below, but I'm not achieving the desired result. Any suggestions?

.floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  margin-left: 30px;
  margin-top: 5px;
}

@keyframes floating {
  from {
    transform: translate(90, 8px);
  }
  35% {
    transform: translate(70, 8px);
  }
  to {
    transform: translate(50, -8px);
  }
}
<div class="floating" style="height: 50px; width: 50px; background: rgb(200,200,200);"></div>

htmlcss

Answer №1

Check out the updated fiddle: https://codepen.io/Nisharg/pen/bzwZvB

To achieve the desired effect, simply add the following code:

65%  { transform: translate(15px, 0);

.floating {
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
margin-left: 30px;
margin-top: 5px;
}

@keyframes floating {
from { transform: translate(0, 0); }
65%  { transform: translate(15px, 0); }
to   { transform: translate(0, 0); }    
}
<div class="floating" style="height: 50px; width: 50px; background: rgb(200,200,200);"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Revolutionize your layout with Bootstrap 4's cutting-edge inline grid

Can anyone help me figure out how to get these input fields to display in the same line? I'm using Bootstrap 4 but can't seem to make it work. Here is how I want it to look: enter image description here Here is my HTML code: <body> &l ...

csshtmlgridbootstrap-4

Can HTML be injected into a Knockout custom element?

I am currently developing a custom knockout element and I would like to inject some HTML into it, similar to what can be done with polymer. My goal is to achieve something along the lines of: ko.components.register('hello-world', { template ...

htmlknockout.js

Creating a simple vertical layout with a fixed header and footer using basic HTML and CSS, allowing for easy stretching and customization

Looking for advice on creating a vertical layout with a static height header and footer, while allowing the center to occupy all available space and adjust to the window height. header ------ center ------ footer Any suggestions would be greatly appr ...

htmllayoutxhtmlcss

Image resizing on the fly

Can dynamic image resizing be achieved through CSS or does it require HTML coding? ...

htmlcssimage

Using the 'onended' audio event emitter in Angular 2 along with a local member of the Component

I'm looking for assistance on how to utilize audio.onended() in order to play the next song in a playlist. I can successfully add songs to the playlist and play them using the above method with an audioObject. However, when audio.onended triggers, I ...

javascripthtmlangularaudio

Difficulty in aligning tables with absolute positioning in Internet Explorer compared to Chrome

Encountering an issue with the alignment of elements when using position: absolute; across multiple browsers. In Chrome, everything appears properly aligned within the table. Refer to the following link for a visual: https://i.sstatic.net/qhrAi.jpg Howe ...

htmlcssgoogle-chromeinternet-explorer

How can progress bars be animated using CSS or JavaScript?

I am currently working on creating a progress bar animation, but I'm unsure whether to use CSS or JS. Can anyone provide insight on how this effect was achieved here? I am hoping to replicate it. Does anyone know if this is the code they used? I&apos ...

javascriptjqueryhtmlcssanimation

Clickable image in HTML that sends a request to an ActionResult

In my MVC project, I am attempting to create an HTML image button within a search box that will redirect to an ActionResult. My current setup looks like this: <input type="text" id="Text1" name="seachKeyword" class="searchTextBox" value="Search" style ...

c#htmlasp.net-mvcvisual-studio-2010

The JavaScript code for changing the text to a new line is not functioning correctly

I am attempting to convert a txt file into JSON format using JavaScript. When I input the txt in a single line like this, it works perfectly: <html> <body> <p id="demo"></p> <script> const txt = '{"nam ...

javascripthtmljquerynode.jsjson

The HTML button failed to toggle on in Div's previous attempt

Check out this JSFiddle link I'm trying to hide a div when the page loads and then show it when a button is clicked, but for some reason it's not working properly. Any suggestions on how to fix this issue? Here's the HTML code I'm usi ...

javascripthtml

What is the best way to send a string value from HTML to a JavaScript function as a parameter?

When embedding HTML codes in Java, I encountered an issue where I needed to pass a string value from HTML to a JavaScript function. Initially, I tried using the following code: out.print("<script>init("+macId+")</script>"); However, this meth ...

javascriptjqueryhtml

What is the maximum character limit for the JQuery validation plugin?

Currently, I am utilizing the JQuery validation plugin in my project. My goal is to set a maxlength for one of the fields. Here's an example of how it can be done by defining rules externally: rules: { Message: { required: false, maxLe ...

javascriptjqueryhtmljquery-validate

The radio button's checked attribute fails to function

I am currently working on adding a hover effect to radio button labels, and while it is functioning correctly, I would like to achieve the following: When a radio button is selected, I want the corresponding label to have a background color. Despite tryi ...

htmlcssradio-button

Limit the scope of addClass() to immediate children and not descendants

Looking at the code below: <div class="menu"> <a href="#" class="dropdown-item">Link 1</a> <a href="#" class="dropdown-item">Link 2</a> <ul class="hamburgerMenu__menu--levelTwo"> <li><a href="#" ...

javascripthtmljquery

Is horizontal spacing automatically added to <img> elements in Bootstrap? And if it is, how can this default setting be changed or overridden?

I'm currently working on the design for a homepage where I want to showcase the same image repeated 4 times in a row, creating a decorative banner effect. Each image is set to occupy 25% of the screen width, which should theoretically fit perfectly si ...

csstwitter-bootstrap

What could be causing the issue with Hindi text not displaying properly on Safari?

I'm having trouble with displaying Hindi text on my website. I tried pasting the text in a new file and it worked, so why is it not loading correctly in this case? The Hindi script is within the second span with the class word w2. "use strict"; le ...

javascripthtmlcssbrowsersafari

Display overlay objects specifically focused around the mouse cursor, regardless of its position on the screen

I am currently working on a project using SVG files and processing.js to develop a unique homepage that incorporates both animation and static elements. The concept is to maintain the overall structure of the original homepage but with varying colors, esse ...

javascripthtmlcsssvgprocessing.js

Tips for enabling an element to exceed the bounds of a scrollable container

I am facing an issue with my menu where it has grown in size, making it necessary to have a scroll function for easier navigation. I have successfully implemented the scrolling feature. However, within this menu is a submenu that should extend out to the ...

javascripthtmlcssdrop-down-menuscroll

What is the best way to link the roll button to a specific video URL?

I am currently working on a project that involves assigning specific videos to 6 roll buttons for continuous play. For instance, I want the first roll button to display a yellow dice and the second button to show a blue dice, and so on. As of now, I have ...

javascripthtmlcss

How to effectively manage multiple stylesheet links in React Native Expo development

Hello, my name is Antika. I recently embarked on a coding journey and have been focusing on learning HTML/CSS/JS along with the basics of React. As a beginner developer, my current project involves creating a Study planner app for myself using React Native ...

javascriptcssreactjsreact-nativeexpo