Tips for creating a dynamic animation: How to make a div fall from the top and rotate

Question

Tips for creating a dynamic animation: How to make a div fall from the top and rotate

Hey everyone, I'm working on creating an animation where a phone falls from the top and then rotates and skews to give the illusion of a 3D shape when it reaches the bottom. However, I'm facing an issue with flickering in the animation when it hits 100% keyframes. Can anyone share some tips, tricks, or examples on how to achieve this smoothly? Thank you in advance! Below is the code I've been using:

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script defer src="brands.js"></script>
  <script defer src="solid.js"></script>
  <script defer src="fontawesome.js"></script>
   <!-- Rest of the HTML content goes here -->
  
</body>
</html>

html css

Answer 1

Answer №1

If you want to achieve a specific effect, consider utilizing the CSS rotate3d function for easier implementation.

To simulate the rotation of an inclined object, use

transform: rotate3d(-0.3, 1, 0, 390deg)

:

div {
  position: absolute;
  background-color: red;
  height: 240px;
  width: 150px;
  border-radius: 3px;
  transform: rotate3d(-0.3, 1, 0, 30deg);
  animation: rotate 1s infinite;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate3d(-0.3, 1, 0, 390deg); /* 405 = 360 + 45 */
  }
}

<div></div>

To create the falling animation, add it in your design to give the impression of a phone falling on the ground:

body {
  height: 350px;
  position: relative;
}

div {
  position: absolute;
  background-color: red;
  height: 240px;
  width: 150px;
  top: 0%;
  border-radius: 3px;
  transform: rotate3d(-0.3, 1, 0, 30deg);
  animation: fall 1s infinite;
}

@-webkit-keyframes fall {
  25% {
    top: calc(100% - 240px);
    transform: rotate3d(-0.3, 1, 0, 45deg);
  }
  100% {
    top: calc(100% - 240px);
    transform: rotate3d(-0.3, 1, 0, 405deg);
    /* 405 = 360 + 45 */
  }
}

<div>
  <p>
    Example text...
  </p>
</div>

Answer 2

If you want to achieve a specific effect, consider utilizing the CSS rotate3d function for easier implementation.

To simulate the rotation of an inclined object, use

transform: rotate3d(-0.3, 1, 0, 390deg)

:

div {
  position: absolute;
  background-color: red;
  height: 240px;
  width: 150px;
  border-radius: 3px;
  transform: rotate3d(-0.3, 1, 0, 30deg);
  animation: rotate 1s infinite;
}

@-webkit-keyframes rotate {
  100% {
    transform: rotate3d(-0.3, 1, 0, 390deg); /* 405 = 360 + 45 */
  }
}

<div></div>

To create the falling animation, add it in your design to give the impression of a phone falling on the ground:

body {
  height: 350px;
  position: relative;
}

div {
  position: absolute;
  background-color: red;
  height: 240px;
  width: 150px;
  top: 0%;
  border-radius: 3px;
  transform: rotate3d(-0.3, 1, 0, 30deg);
  animation: fall 1s infinite;
}

@-webkit-keyframes fall {
  25% {
    top: calc(100% - 240px);
    transform: rotate3d(-0.3, 1, 0, 45deg);
  }
  100% {
    top: calc(100% - 240px);
    transform: rotate3d(-0.3, 1, 0, 405deg);
    /* 405 = 360 + 45 */
  }
}

<div>
  <p>
    Example text...
  </p>
</div>

Answer 3

Answer №2

To avoid any jank in the animation, it is important to define all animation values for each keyframe. Omitting rotation and skew values in certain keyframes can lead to performance issues.

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script defer src="brands.js"></script>
  <script defer src="solid.js"></script>
  <script defer src="fontawesome.js"></script>
    <style type="text/css">
        .phone{
            width: 600px;
            height: 1080px;
            background-color: black;
            border-radius: 9%;
            margin: 50% auto;
            position: relative;
            animation: bounce 2s ease-in-out forwards;
        }

        @keyframes bounce {
          0% { transform: translateY(-500px) rotate(0) skew(0, 0); }
          50% { transform: translateY(0) rotate(0) skew(0, 0); }
          70% { transform: translateY(-200px) rotate(0) skew(0, 0); }
          100% {
            transform: translateY(-50px) rotate(30deg) skew(5deg, 347deg);
          }
        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="inner-phone">
            <div class="inner-screen">
                <div class="chat-screen">
                    <div class="container-chat">
                        <div class="chat-item ci1">
                            <div id="wrapper">
                              <div class="chat">
                                <div class="chat-container">
                                  <div class="chat-listcontainer">

                                    <ul class="chat-message-list">
                                    </ul>

                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                        <div class="chat-item ci2"> 
                        </div>
                        <div class="chat-item ci3">
                        </div>
                        <div class="chat-item ci4">
                        </div>
                        <div class="chat-item ci5">
                        </div>                                  
                    </div>
                </div>
                <div class="rich-message">
                </div>
            </div>
        </div>
        <div class="phone-drop-shadow"></div>
    </div>
    <div class="portal-phone">
        
    </div>
</body>
</html>

Answer 4

To avoid any jank in the animation, it is important to define all animation values for each keyframe. Omitting rotation and skew values in certain keyframes can lead to performance issues.

<!DOCTYPE html>
<html>
<head>
    <title></title>
  <script defer src="brands.js"></script>
  <script defer src="solid.js"></script>
  <script defer src="fontawesome.js"></script>
    <style type="text/css">
        .phone{
            width: 600px;
            height: 1080px;
            background-color: black;
            border-radius: 9%;
            margin: 50% auto;
            position: relative;
            animation: bounce 2s ease-in-out forwards;
        }

        @keyframes bounce {
          0% { transform: translateY(-500px) rotate(0) skew(0, 0); }
          50% { transform: translateY(0) rotate(0) skew(0, 0); }
          70% { transform: translateY(-200px) rotate(0) skew(0, 0); }
          100% {
            transform: translateY(-50px) rotate(30deg) skew(5deg, 347deg);
          }
        }
    </style>
</head>
<body>
    <div class="phone">
        <div class="inner-phone">
            <div class="inner-screen">
                <div class="chat-screen">
                    <div class="container-chat">
                        <div class="chat-item ci1">
                            <div id="wrapper">
                              <div class="chat">
                                <div class="chat-container">
                                  <div class="chat-listcontainer">

                                    <ul class="chat-message-list">
                                    </ul>

                                  </div>
                                </div>
                              </div>
                            </div>
                        </div>
                        <div class="chat-item ci2"> 
                        </div>
                        <div class="chat-item ci3">
                        </div>
                        <div class="chat-item ci4">
                        </div>
                        <div class="chat-item ci5">
                        </div>                                  
                    </div>
                </div>
                <div class="rich-message">
                </div>
            </div>
        </div>
        <div class="phone-drop-shadow"></div>
    </div>
    <div class="portal-phone">
        
    </div>
</body>
</html>

Tips for creating a dynamic animation: How to make a div fall from the top and rotate

Answer №1

Answer №2

Similar questions

Bootstrap CSS: arranging columns for mobile devices

Tips for updating mysql records on a web page without the need to refresh it using PHP

Angular unable to find a route for external links

Create a minimalist Vue table design that enforces a maximum of 2 or 3 columns within

Achieve horizontal wrapping of div elements

What is the best way to position <div> elements?

What is the best way to choose the initial and final <td> that appears within a <tr>?

What is the best method for resizing an SVG according to the size of my website's window?

What is the best way to update JSON data using JQuery?

When using jQuery to focus on an input element, the cursor fails to show up

Truncate a string in Kendo Grid without any white spaces

Compatibility Issue between Jquery UI CheckBox Button and Click Function in IE8

When an input is double-clicked, the message"[object object]" appears on the screen

Establish the lowest possible height for Angular Material Expansion Panel Content

Enabling the upload of .sql files in a file input field

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Implement a customized toString method for components in ReactJS

What is the correct CSS2 selector syntax to apply the :hover effect to the nth child of a specific element?

The navigation and title refuse to align in the center

Displaying text on an image when hovering over it