Revert this css motion blur effect to vertical
I have this code that allows the object to move sideways, but I want it to move in blue vertically, so it moves up and down and then back. Could you help me?
#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>
+3
source to share
1 answer
Try changing the animation.
Just replace all attributes left
withTop
And the whole transformation property is X, ScaleX
and SkewX
toSkewX
SkewY
#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% {
top: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
top: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleY(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: scaleY(1.1) skewY(-4deg);
}
50% {
top: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
55% {
left: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleY(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: scaleY(1.1) skewY(4deg);
}
100% {
top: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
}
@keyframes motionblur {
0% {
top: 0;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
}
5% {
top: 0;
-webkit-transform-origin: 0 0;
-webkit-transform: scaleY(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: scaleY(1.1) skewY(-4deg);
}
50% {
top: 300px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
55% {
top: 300px;
-webkit-transform-origin: 100% 0;
-webkit-transform: scaleY(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: scaleY(1.1) skewY(4deg);
}
100% {
top: 0px;
text-shadow: 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 rgba(200, 0, 0, 0);
-webkit-transform: scaleY(1) skewY(0deg);
}
<div id="outer">
<div id="mb">Motion Blur</div>
</div>
+5
source to share