Flip the direction of this vertical CSS motion blur effect

Is there a way to modify this code so that the object can have a vertical motion blur instead of a horizontal one? I want it to move from top to bottom and then back up. Can anyone assist me with this?

http://jsfiddle.net/db8gr4y6/

  #outer {
    position: relative;
    margin: 10px;
  }
  #mb {
    position: absolute;
    left: 0;
    font-size: 2em;
    font-weight: bold;
    padding: 0.2em 1em;
    color: #fff;
    background-color: #600;
    border: 0.2em solid #c00;
    border-radius: 8px;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0);
    box-shadow: 0 0 2px rgba(200, 0, 0, 0);
    -webkit-animation: motionblur 4s ease-in-out infinite;
    animation: motionblur 4s ease-in-out infinite;
  }
  @-webkit-keyframes motionblur {
    0% {
      left: 0;
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
      box-shadow: 0 0 0 rgba(200, 0, 0, 0);
    }
    5% {
      left: 0;
      -webkit-transform-origin: 0 0;
      -webkit-transform: scaleX(0.85);
    }
    25% {
      text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
      box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
      -webkit-transform: scaleX(1.1) skewX(-4deg);
    }
    50% {
      left: 300px;
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
      box-shadow: 0 0 0 rgba(200, 0, 0, 0);
      -webkit-transform: scaleX(1) skewX(0deg);
    }
    55% {
      left: 300px;
      -webkit-transform-origin: 100% 0;
      -webkit-transform: scaleX(0.85);
    }
    75% {
      text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
      box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
      -webkit-transform: scaleX(1.1) skewX(4deg);
    }
    100% {
      left: 0px;
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
      box-shadow: 0 0 0 rgba(200, 0, 0, 0);
      -webkit-transform: scaleX(1) skewX(0deg);
    }
  }
  @keyframes motionblur {
    0% {
      left: 0;
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
      box-shadow: 0 0 0 rgba(200, 0, 0, 0);
    }
    5% {
      left: 0;
      transform-origin: 0 0;
      transform: scaleX(0.85);
    }
    25% {
      text-shadow: -5px 0 5px rgba(255, 255, 255, 1);
      box-shadow: -15px 0 10px -5px rgba(200, 0, 0, 0.5);
      transform: scaleX(1.1) skewX(-4deg);
    }
    50% {
      left: 300px;
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
      box-shadow: 0 0 0 rgba(200, 0, 0, 0);
      transform: scaleX(1) skewX(0deg);
    }
    55% {
      left: 300px;
      transform-origin: 100% 0;
      transform: scaleX(0.85);
    }
    75% {
      text-shadow: 5px 0 5px rgba(255, 255, 255, 1);
      box-shadow: 15px 0 10px -5px rgba(200, 0, 0, 0.5);
      transform: scaleX(1.1) skewX(4deg);
    }
    100% {
      left: 0px;
      text-shadow: 0 0 0 rgba(255, 255, 255, 0);
      box-shadow: 0 0 0 rgba(200, 0, 0, 0);
      transform: scaleX(1) skewX(0deg);
    }
<div id="outer">
  <div id="mb">Motion Blur</div>
</div>

htmlcsscss-transitionscss-animations

Answer №1

Follow these steps to create a reverse animation effect.

Simply switch all left attributes to Top.

Change all X transform properties, ScaleX and SkewX, to SkewX and SkewY.

#outer {
  position: relative;
  margin: 10px;
}
#mb {
  position: absolute;
  top: 0; /* Replaced left with top */
  font-size: 2em;
  font-weight: bold;
  padding: 0.2em 1em;
  color: #fff;
  background-color: #600;
  border: 0.2em solid #c00;
  border-radius: 8px;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0);
  box-shadow: 0 0 2px rgba(200, 0, 0, 0);
  -webkit-animation: motionblur 4s ease-in-out infinite;
  animation: motionblur 4s ease-in-out infinite;
}
@-webkit-keyframes motionblur {
  0% {
    top: 0; /* Changed from left to top */
    text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 rgba(200, 0, 0, 0);
  }
  /* Other keyframe changes for SkewX and SkewY transformations */

<div id="outer">
  <div id="mb">Motion Blur</div>
</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

Design a CSS floating div with a captivating bubble effect

My current setup includes a DIV element styled as follows: <div class="modal"></div> .modal { position: fixed; z-index: 999999; right: 310px; top: 67px; width: 431.6px; height: 550px; border-radius: 25px; box-s ...

css

The arrangement of CSS code is crucial for it to work properly; any deviation from the correct order

I am facing a problem where I am trying to display a circular div using CSS, but it only works if the background image property is set first. Typically, this wouldn't be an issue if the image wasn't being dynamically inserted using PHP code. I ...

css

Tips for customizing the appearance of a chosen radio button

Here is my HTML code snippet: <div class="col-md-12 money-radio-container"> <input type="radio" name="optradio" class="money-radio" value="10">10 <span>$</span> <input type="radio" name="optradio" class="money-radio" val ...

htmlcss

Modify the size of images while shuffling using Javascript

Hey there! I've got some bootstrap thumbnails set up and I'm using a script to shuffle the images inside the thumbnails or a element within the li. It's working fine, but some of the images are coming out larger or smaller than others. I&apo ...

javascripthtmltwitter-bootstrap

The functionality to move forward and backward in Modal Bootsrap seems to be malfunctioning

I am in need of assistance as I have encountered a major issue that has halted my work progress for several days. My goal is to implement a feature that allows users to navigate between different days both forwards and backwards. While the functionality it ...

javascripthtmljquerycss

What could be causing certain link titles to appear outside of my <a> tags?

Check out this jsbin link to see the issue I am facing. I noticed that some of my link titles are appearing outside the anchor tags. Initially, I thought it was because some titles were enclosed in double quotes. I tried creating a function to fix this, b ...

javascripthtmlajaxjson

Styling CSS Based on Input from Child Siblings

Is it possible to customize an adjacent element based on a valid input from a child element? Let's say we have the following HTML structure: <div id="source"> <input type="text"> </div> <div id="target"> </div> Below ...

htmlcsssassless

Display user input within a modal dialogue box

I have a subscription form that requires users to enter their name and email address. After clicking on "Compete Now," a pop-up appears asking for workshop information and postal code. The form is functioning correctly as intended. However, I want the em ...

javascripthtmlcsstwitter-bootstrap

Using RMarkdown to incorporate custom CSS styling in your documents

Having some trouble with my HTML report created from RMarkdown and applying CSS. The browser version displays correctly, but when printed, the styling doesn't come through. Below is an example of the RMarkdown code: --- title: "Table" output: html_ ...

cssrr-markdown

Adjust the appearance of an element that is being inserted using .before() by utilizing a variable

Using the jQuery function .before(), I am creating an element in this format: d.children().first().before("<div class='test-div'><span class='test-span'>" + text + "</span></div>") I want to style the span dyna ...

jqueryhtmlcss

Retrieving online content and updating it upon reestablishing internet connection

Currently, I am in the process of developing an app that will feature a substantial amount of web content. My plan is to use Phone Gap build for its release; however, I intend to host all the content online and link to it from within the app. I have been c ...

javascriptandroidhtmliosphonegap-build

Unable to retrieve input values from the text fields using JavaScript

In my project, I have created two PHP pages - "doc.php" and "chkval.php". The issue I am facing is that the textfield values are not being captured in the "chkval.php" page using $POST method. An error that I encountered is: Use of undefined constant re ...

phpjavascriptmysqlhtmltextfield

Designing a calendar with a grid template

I am attempting to design a calendar that resembles an actual calendar, but I am facing an issue where all created divs (representing days) are being saved in the first cell. I am not sure how to resolve this. Any help would be greatly appreciated. css . ...

javascriptcssreactjscalendar

Steps for creating an expandable menu in the Magento category list

Looking for a way to create a category menu that expands when clicked on? Check out this example of a left menu (not Magento) at Can this be achieved with CSS alone? Or is there a specific module that can help with this functionality? ...

cssmagentowebshop

How can I synchronize two webkit-animations at the same speed but with one covering a greater distance?

[Update: The solution involved creating two containers, with the second animation container configured to have left: 100%.] I designed a simple animation that moves a large gif image across the page horizontally, where the width of the gif is 1536px. Sin ...

htmlcssanimationwebkit-animation

The URL is unresponsive following the deployment of the production build in tailwind

The image URL in my project is functioning correctly in the VITE server environment before the production build. However, after the production build, it fails to display the correct path of the image in the HTML. All other images are displaying properly ex ...

htmlurlbackgroundbackground-imagetailwind-css

How can I trace the origin of a post request sent from a form?

When constructing an HTML form, I typically utilize <form action="/postRoute" method="post"> to submit a post request. However, while examining a form for which I needed the post request URL, I came across the following: <form action="index.cf ...

javascripthtml

Struggling to make the text color change when hovering

On my website, I added a tab called newarrival at the top of the page. When you hover over this tab, I want the text to turn blue to indicate that it's a link. However, despite my efforts, it doesn't seem to be working as expected. You can see th ...

csscolorshover

Restoring styles back to the default CSS settings

I am currently working on creating visualizations using D3, and one challenge that I have encountered is the need to define a lot of styles within my code instead of in my CSS where I would prefer them to be. This necessity arises mainly to support transi ...

javascriptcssd3.js

Adding an image to a two-column layout with text

Seeking assistance with my website creation using HTML, CSS, and jQuery. Currently, I have a text layout formatted in two columns with an image placed before the text as shown below: <div> <div style="float:right"> <img src="ima ...

jqueryhtmlcss