Floating Ship Animation Using CSS3

I am currently working on creating a floating animation effect. The concept involves having the element swing with an axis at its lower part, similar to the image provided below:

My challenge lies in figuring out how to coordinate the two movements and ensure that they remain consistent.

-webkit-animation-timing-function: linear; 
    animation-timing-function: linear;

-webkit-transform: rotateZ(-30deg);
        -ms-transform: rotateZ(-30deg);
        transform: rotateZ(-30deg);

-webkit-transform: rotateZ(30deg);
        -ms-transform: rotateZ(30deg);
        transform: rotateZ(30deg);
cssanimation

Answer №1

Is this the desired outcome?

#boat
{
  animation: sway 2s infinite ease;
  background: blue;
  color: #fff;
  text-align: center;
  transform-origin: bottom center;
  height: 100px;
  line-height: 100px;
  width: 100px;
}

@keyframes sway
{
  0%{ transform: rotate(-10deg);}
  50%{ transform: rotate(20deg);}
  100%{ transform: rotate(-10deg);}
}
<div id="boat">BOAT</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

Stylish HTML table with personalized CSS styling

Can anyone help me figure out how to properly format a table using HTML and CSS? I've been struggling with this task for hours... I'm having trouble organizing the rows in the table to match the layout shown in the image below. All items should b ...

htmlcss

Tips for organizing your CSS from scratch without relying on a pre-existing framework such as bootstrap, bulma, or materialize

As I embark on a new Angular project, the decision has been made to create our own component library instead of using frameworks like Bootstrap, Bulma, or Materialize. Despite some initial research, I'm feeling a bit lost on where to begin (other than ...

cssangularsasscomponentscss-frameworks

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

I'm just getting started with Tailwind CSS and I decided to build the user interface of my nextjs application using a "mobile first" approach like everyone suggests. I got the flex direction and background color working perfectly on mobile screens, so ...

htmlcssreactjsnext.jstailwind-css

Looking to adjust the alignment in BootsFaces? Want to move the final link of the navbar to the right corner?

<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.c ...

csshtmlbootsfaces

Designing dynamic SVG elements that maintain uniform stroke widths and rounded edges

I'm currently tackling a project that involves creating SVG shapes with strokes that adjust responsively to the size of their parent container. My aim is for these shapes to consistently fill the width and height of the parent container, and I intend ...

javascripthtmlcsssvgfrontend

What's the best way to use CSS for making a linear gradient that spans horizontally and includes several different color transitions

When I use the following code: <style> h1 { height: 200px; background: linear-gradient(red, green, blue); } </style> I get the standard color spectrum with horizontal lines. Now, I want to change it so that the lines are vertical. I& ...

htmlcss

Bootstrap form validation solution

Utilizing bootstrap validation to validate a jsp page. The folder structure is as follows: WebContent ├── bootstrap-form-validation ├── js └── pages All three folders are under the web content. If I create another folder called teacher ...

javascriptjqueryhtmlcsstwitter-bootstrap

Placing <object> within the existing HTML form

If a user enters the values 12345 into an input box on my webpage and clicks a button, an object will appear below or instead of the form. The code I have for this functionality is: <form name="form" action="" method="post"> <input type="text" ...

javascriptphpjqueryhtmlcss

Looking to modify the height and width of an image when it is hovered over using inline CSS

My current project involves working with a dynamic template where the HTML code is generated from the back-end using TypeScript. I am trying to implement inline CSS on hover, but despite having written the necessary code, it does not seem to work as intend ...

htmlcssangulartypescript

Utilizing Jquery to implement active state and unique IDs during mouseover operation

I found this great example on Stack Overflow that demonstrates Jquery Show/Hide functionality when hovering over links. It works perfectly by showing the content of the next div when the corresponding link is hovered over. However, I'm facing an issu ...

jqueryhtmlcss

Tips for updating the color of the active menu item on a website in real-time

As someone who is new to web development, I am interested in creating menus similar to the ones found on stackoverflow.com (such as Questions, Tags, and Users shown above). My main question is how can I change the color of a selected menu item? For example ...

htmlcssbackground-colormenu-itemsmenuitem-selection

The TD border is slicing through the div and is placed on the table in IE standards, causing it

Below is the HTML code where the div is being cut by the table border when the page is in standards mode. Interestingly, if I remove the <!DOCTYPE html>, then it works fine as expected. The issue of the outside div not behaving properly on the table ...

htmlcss

When a text is wrapped by an HTML div using absolute positioning, is there a way to prevent it from wrapping without relying on white space

I have a group of div elements positioned absolutely on the screen. If any div contains content that is too big for the screen, the browser wraps it into multiple lines to fit. However, I do not want this behavior. Instead, I want the overflowing content ...

javascriptjquerycsshtml

Styling a list within a div using CSS

I have a CSS file that looks like this: .h_bg{ height:100%; background-size:auto 100%; background-position:center center; background-repeat:no-repeat; position:relative; } .h_bg h1{ width: 100%; position:absolute; line-heig ...

htmlcss

Avoid wrapping elements

Is there a foolproof method or best practice to prevent an HTMLElement from wrapping? Specifically, I'm referring to elements with relative positioning. One possible solution could be using absolute elements and adjusting their left position based on ...

javascriptjqueryhtmlcssdom

Trouble with the Bootstrap navbar loading correctly

Recently I started using Bootstrap and decided to implement one of their templates. Everything is working fine, except for my navbar which is not loading correctly. It should look like this: Desired Navbar However, in both Chrome and Firefox, it appears l ...

htmlcsstwitter-bootstrap

Use Flexbox hover effect to display submenu text exclusively in the column being hovered

Having an issue with a 5 column flexbox. Each box should display a header text and supplementary text only when hovered over, returning to normal when unhovered. I was able to accomplish this in Codepen (view the rough model here). However, when trying to ...

htmlcssflexboxelementor

Adding a lag time between the entrance and exit animations of a ViewAnimator in Android

    I want to add some animation effects to my view transaction with a ViewAnimator. The challenge is to make my view slide out and in from the SAME direction. While I need the in and out animation to occur simultaneously, how can I insert a delay bet ...

javaandroidanimationandroid-animationviewanimator

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Here is a script I am working with: <script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script> <script> $(document).ready(function() { $('.photoset-grid').photose ...

javascriptjquerycsshtml

CSS is being applied on Internet Explorer 11 only after a hard refresh with Ctrl+F5

While my website loads perfectly in Chrome and Firefox, I have been experiencing issues with Internet Explorer 11. The CSS is not fully applying until after pressing Ctrl+F5 multiple times. It's strange because some of the CSS is being applied but cer ...

cssinternet-explorer