Master the Art of CSS Rocking Image Animation

CSS Rocking Image Animation

In web layout, creating visually engaging and interactive content material is essential for shooting site visitors’ interest. One of the handiest approaches to do this is via adding movement outcomes to pictures. One such dynamic impact is the CSS rocking image animation, which brings your visuals to existence by using making them tilt, sway, or even “rock” back and forth. This animation not only adds strength on your web page but also improves user interplay with the content.

Table Of Contents
  1. What is a CSS Rocking Image?
  2. Why Should You Use a CSS Rocking Image?
  3. Related Content You Might Enjoy
  4. Source Code Of CSS Rocking Image
  5. Code & Preview
  6. Conclusion

What is a CSS Rocking Image?

A CSS rocking image is an easy but powerful animation method that entails tilting an image in numerous guidelines, creating a “rocking” motion. It is usually finished using CSS houses like @keyframes, rework, and rotate. The rocking effect may be applied to any picture, offering a playful but professional animation that doesn’t require JavaScript. This animation can be caused via consumer interaction, consisting of hover results, or run constantly for added dynamic enchantment.

Why Should You Use a CSS Rocking Image?

  1. Captures Attention: Stunning CSS images help your images stand out and add movement. This increases the chances of capturing the user’s attention. This is especially true when placed in call-to-action buttons or promotional banners.
  2. Enhances User Experience: Movement has a huge impact on the user experience. By adding named movement, such as a swinging image, you make the page more interactive. This increases engagement and time spent on your site.
  3. Improves Visual Design: Oscillation effects add a layer of complexity to an image or object. Make it look more attractive and enhance the overall beauty of the web page

Related Content You Might Enjoy

  1. Explore the Magic of CSS Background Animation
  2. Animated Circular Profile UI Design In HTML, CSS & Vanilla Javascript
  3. Animated Login Form Using HTML, CSS3

Source Code Of CSS Rocking Image

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css rocking image</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- =================== Example 1: Simple CSS Rocking Animation =================== -->
    <div class="rocking-image-container">
      <p class="title">Example 1: Simple CSS Rocking Animation</p>
      <img
        src="https://i.postimg.cc/7YtLn0RM/katbiralli.jpg"
        alt="Rocking Image"
        class="rocking-image"
      />
    </div>

    <!-- =================== Example 2: Rocking Image on Hover with CSS =================== -->
    <div class="hover-rock-image-container">
      <p class="title">Example 2: Rocking Image on Hover with CSS</p>
      <img
        src="https://i.postimg.cc/VvDkTCkw/lion.jpg"
        alt="Hover Rocking Image"
        class="hover-rock-image"
      />
    </div>

    <!-- =================== Example 3: Rocking Effect Triggered on Click with JavaScript and CSS =================== -->
    <div class="click-rock-image-container">
      <p class="title">
        Example 3: Rocking Effect Triggered on Click with JavaScript and CSS
      </p>
      <img
        src="https://i.postimg.cc/zXGBh0xG/tiger3.jpg"
        alt="Click Rocking Image"
        class="click-rock-image"
        onclick="rockImage()"
      />
    </div>

    <!-- =================== Example 4: Rocking with Skew and Color Shifting =================== -->
    <div class="skew-rock-color-container">
      <p class="title">Example 4: Rocking with Skew and Color Shifting</p>
      <img
        src="https://i.postimg.cc/8C6s5ctd/wol.jpg"
        alt="Skew Rocking Image"
        class="skew-rock-color"
      />
    </div>

    <!-- =================== Example 5: Animated Eyes Follow Mouse Cursor =================== -->
    <div class="eye-main-container">
      <p class="title">Example 5: Animated Eyes Follow Mouse Cursor</p>
      <div class="eyes-container">
        <div class="eye">
          <div class="pupil"></div>
        </div>
        <div class="eye">
          <div class="pupil"></div>
        </div>
      </div>
    </div>

    <!-- =================== Example 6: Continuous Rocking with Glow Effect =================== -->
    <div class="glow-rock-container">
      <p class="title">Example 6: Continuous Rocking with Glow Effect</p>
      <img
        src="https://i.postimg.cc/hvpVrhFz/swan.jpg"
        alt="Glow Rocking Image"
        class="glow-rock-image"
      />
    </div>

    <!-- =================== Example 7: Zigzag Rocking Motion =================== -->
    <div class="zigzag-rock-container">
      <p class="title">Example 7: Zigzag Rocking Motion</p>
      <img
        src="https://i.postimg.cc/VsR91ZSf/puppy.jpg"
        alt="Zigzag Rocking Image"
        class="zigzag-rock"
      />
    </div>

    <!-- =================== Example 8: Rocking with an Elastic Stretch =================== -->
    <div class="elastic-rock-container">
      <p class="title">Rocking with an Elastic Stretch</p>
      <img
        src="https://i.postimg.cc/gJbycfqJ/eagle.jpg"
        alt="Elastic Rocking Image"
        class="elastic-rock"
      />
    </div>

    <!-- =================== Example 9: Continuous Rocking with CSS Variables for Custom Speed =================== -->
    <div class="variable-rock-image-container">
      <p class="title">
        Example 9: Continuous Rocking with CSS Variables for Custom Speed
      </p>
      <img
        src="https://i.postimg.cc/SRyKDrqV/fighter.jpg"
        alt="Variable Speed Rocking Image"
        class="variable-rock-image"
      />
    </div>

    <!-- javascript link -->
    <script src="script.js"></script>
  </body>
</html>

style.css

@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
* {
  margin: 0;
  padding: 0;
  outline: none;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: "Montserrat", sans-serif;
}

body {
  position: relative;
  min-height: 100vh;
  background-color: #DCE4C9;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-template-rows: auto;
  gap: 2.5rem;
  padding: 4rem 6rem;
}

.general-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-top: 50px;
}

.title {
  text-transform: capitalize;
  font-size: 1rem;
  font-weight: 600;
}

img {
  width: 250px;
  max-height: 250px;
}
/* =================== Example 1: Simple CSS Rocking Animation =================== */
.rocking-image-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}

.rocking-image-container > p {
  animation: rock 1s ease-in-out infinite alternate;
}

.rocking-image {
  width: 300px;
  height: 200px;

  animation: rock 1s ease-in-out infinite alternate;
}

@keyframes rock {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

/* =================== Example 2: Rocking Image on Hover with CSS =================== */
.hover-rock-image-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}

.hover-rock-image {
  width: 300px;
  height: 200px;

  transition: transform 0.3s ease;
}

.hover-rock-image:hover {
  animation: hoverRock 0.5s ease-in-out infinite alternate;
}

@keyframes hoverRock {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

/* =================== Example 3: Rocking Effect Triggered on Click with JavaScript and CSS =================== */
.click-rock-image-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}
.click-rock-image {
  width: 300px;
  height: 200px;
  transition: transform 0.3s ease;
}

@keyframes clickRock {
  0% {
    transform: rotate(-15deg);
  }
  100% {
    transform: rotate(15deg);
  }
}

.click-rock {
  animation: clickRock 0.7s ease-in-out infinite alternate;
}

/* =================== Example 4: Rocking Effect with Gradual Stop (CSS and JavaScript) =================== */
.skew-rock-color-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}

.skew-rock-color-container > p {
  animation: skewColorRock 1.5s infinite alternate ease-in-out;
}

.skew-rock-color {
  width: 300px;
  height: 200px;
  border: 10px solid #ff6347;
  animation: skewColorRock 1.5s infinite alternate ease-in-out;
}

@keyframes skewColorRock {
  0% {
    transform: skew(-5deg, 5deg) rotate(-3deg);
    border-color: #ff6347;
    color: #ff6347;
  }
  50% {
    transform: skew(5deg, -5deg) rotate(3deg);
    border-color: #00bfff;
    color: #00bfff;
  }
  100% {
    transform: skew(-5deg, 5deg) rotate(-3deg);
    border-color: #32cd32;
    color: #32cd32;
  }
}

/* =================== Example 5: Continuous Rocking with CSS Variables for Custom Speed =================== */
:root {
  --rock-speed: 2s;
}

.variable-rock-image-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}

.variable-rock-image-container > p {
  animation: variableRock var(--rock-speed) ease-in-out infinite alternate;
}

.variable-rock-image {
  width: 300px;
  height: 200px;
  animation: variableRock var(--rock-speed) ease-in-out infinite alternate;
}

@keyframes variableRock {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

/* =================== Example 6: Continuous Rocking with Glow Effect =================== */
.glow-rock-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}

.glow-rock-container > p {
  animation: glowRock 1.2s ease-in-out infinite alternate,
    glowing 1.5s ease-in-out infinite alternate;
}

.glow-rock-image {
  width: 300px;
  height: 200px;
  animation: glowRock 1.2s ease-in-out infinite alternate,
    glowing 1.5s ease-in-out infinite alternate;
}

@keyframes glowRock {
  0% {
    transform: rotate(-8deg);
  }
  100% {
    transform: rotate(8deg);
  }
}

@keyframes glowing {
  0% {
    filter: drop-shadow(0 0 10px #00ff00);
  }
  100% {
    filter: drop-shadow(0 0 20px #00ffff);
  }
}

/* =================== Example 7: Zigzag Rocking Motion =================== */
.zigzag-rock-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}
.zigzag-rock-container > p {
  animation: zigzagRock 2s infinite ease-in-out;
}
.zigzag-rock {
  width: 300px;
  height: 200px;
  animation: zigzagRock 2s infinite ease-in-out;
}

@keyframes zigzagRock {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  25% {
    transform: translate(15px, -10px) rotate(5deg);
  }
  50% {
    transform: translate(-15px, -20px) rotate(-5deg);
  }
  75% {
    transform: translate(10px, -10px) rotate(2deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

/* =================== Example 8: Rocking with an Elastic Stretch =================== */
.elastic-rock-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}
.elastic-rock-container > p {
  animation: elasticRock 1.8s infinite ease-in-out;
}
.elastic-rock {
  width: 300px;
  height: 200px;
  animation: elasticRock 1.8s infinite ease-in-out;
}

@keyframes elasticRock {
  0% {
    transform: rotate(-6deg) scale(1);
  }
  25% {
    transform: rotate(6deg) scale(1.05);
  }
  50% {
    transform: rotate(-6deg) scale(1);
  }
  75% {
    transform: rotate(6deg) scale(0.95);
  }
  100% {
    transform: rotate(-6deg) scale(1);
  }
}

/* =================== Example 9: Animated Eyes Follow Mouse Cursor =================== */
.eye-main-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 1.5rem;
}
/* Eyes Container */
.eyes-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  gap: 30px;
}

/* Eye */
.eye {
  width: 80px;
  height: 80px;
  background: #fff;
  border: 3px solid #333;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Pupil */
.pupil {
  width: 30px;
  height: 30px;
  background: #333;
  border-radius: 50%;
  position: absolute;
  transition: transform 0.1s ease-out;
}

script.js

// =================== Example 3: Rocking Effect Triggered on Click with JavaScript and CSS ===================
function rockImage() {
  const image = document.querySelector(".click-rock-image");
  image.classList.add("click-rock");

  setTimeout(() => {
    image.classList.remove("click-rock");
  }, 2000); // Rock for 2 seconds
}

// =================== Example 7: Rocking with a Tilt and Zoom Effect on Click
function zoomRockEffect() {
  const image = document.querySelector(".zoom-rock-image");
  image.classList.add("zoom-rock");

  setTimeout(() => {
    image.classList.remove("zoom-rock");
  }, 1500); // Rock and zoom for 1.5 seconds
}


// Get all pupils
const pupils = document.querySelectorAll('.pupil');

// Track mouse movement
document.addEventListener('mousemove', (event) => {
  const { clientX: mouseX, clientY: mouseY } = event;

  pupils.forEach((pupil) => {
    // Get eye dimensions and position
    const rect = pupil.parentElement.getBoundingClientRect();
    const eyeX = rect.left + rect.width / 2;
    const eyeY = rect.top + rect.height / 2;

    // Calculate angle
    const angle = Math.atan2(mouseY - eyeY, mouseX - eyeX);

    // Calculate movement (pupil moves within the eye bounds)
    const distance = Math.min(rect.width / 4, rect.height / 4); // Limit movement
    const pupilX = Math.cos(angle) * distance;
    const pupilY = Math.sin(angle) * distance;

    // Apply transformation
    pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`;
  });
});

Code & Preview

Conclusion

The CSS rocking image effect is an easy but effective way to add dynamic motion to your internet layout. By combining CSS animations with a bit of creativity, you can create interactive, attractive content that complements the overall personal experience. Whether aiming to spotlight merchandise, emphasize call-to-movement buttons, or truly add a touch of fun to your site, rocking photographs can deliver your layout to existence in a powerful and visually beautiful manner.

You can download the source files for free by clicking the Source Files button. Additionally, you can edit and view a live demo by clicking the Edit with CodePen button below.

Source Code
Edit With Codepen

Related Posts

Scroll to Top