I have a ripple effect set to a CSS class using a pseudo selector.
I'd like that animation to run from behind the element itself, but I can't manage to find how to do so.
.button {
width: 50px;
height: 50px;
background: lightblue;
position: absolute;
top: 50px;
left: 50px;
}
i.ripple:before {
content: "";
position: absolute;
border-radius: 50%;
width: 30px;
height: 30px;
background: darkorange;
animation: ripple 2s ease-in infinite;
}
#keyframes ripple {
0% {transform: scale(1);opacity: .5;}
100% {transform: scale(8);opacity: 0;}
}
<i class="ripple button">test</i>
If you run the example, you will see that the orange circle is on top of the blue box from the .button class, I'd like it to be behind.
I think this issue is related to this other question:
::before pseudo-element stacking order issue
But can't figure out much of it.
Set its z-index to -1 and you should be good.
.button {
width: 50px;
height: 50px;
background: lightblue;
position: absolute;
top: 50px;
left: 50px;
}
i.ripple:before {
content: "";
position: absolute;
border-radius: 50%;
width: 30px;
height: 30px;
background: darkorange;
animation: ripple 2s ease-in infinite;
z-index:-1;
}
#keyframes ripple {
0% {transform: scale(1);opacity: .5;}
100% {transform: scale(8);opacity: 0;}
}
<i class="ripple button">test</i>
Update the Z-Index.
.button {
width: 50px;
height: 50px;
background: lightblue;
position: absolute;
top: 50px;
left: 50px;
}
i.ripple:before {
content: "";
position: absolute;
border-radius: 50%;
width: 30px;
height: 30px;
background: darkorange;
animation: ripple 2s ease-in infinite;
z-index: -1;
}
#keyframes ripple {
0% {transform: scale(1);opacity: .5;}
100% {transform: scale(8);opacity: 0;}
}
<i class="ripple button">test</i>
.button {
width: 50px;
height: 50px;
background: lightblue;
position: absolute;
top: 50px;
left: 50px;
}
i.ripple:before {
content: "";
position: absolute;
border-radius: 50%;
width: 30px;
height: 30px;
background: darkorange;
animation: ripple 2s ease-in infinite;
}
#keyframes ripple {
0% {transform: scale(1);opacity: .5;}
100% {transform: scale(8);opacity: 0;}
}
<i class="ripple button">test</i>
Related
Please help, when I'm trying to play animation with moving ball in position X and Y at the same time it doesn't work, some strange behaviour. I would like to look like a batted and falling ball
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s, fly-ball-y 2s;
}
#keyframes fly-ball-x {
100% {
transform: translateX(300px);
}
}
#keyframes fly-ball-y {
100% {
transform: translateY(100px);
}
}
<div class="ball"></div>
**The result I'm expecting is like the code below:**
#keyframes fly-ball-x {
100% {
left: 300px;
}
}
#keyframes fly-ball-y {
100% {
bottom: 0;
}
}
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball-x 2s cubic-bezier(0.17, 0.67, 0.6, 1), fly-
ball-y 2s;
}
<div class="ball"></div>
.ball {
position: absolute;
left: 18%;
bottom: 100px;
width: 40px;
height: 40px;
background-color: cadetblue;
border-radius: 50%;
animation: fly-ball 2s
}
#keyframes fly-ball {
100% {
transform: translateX(300px) translateY(100px);
}
}
<div class="ball"></div>
It is because you weren't running the animations concurrently. Here both translations are just being run at the same time. You just had a bit more than you needed.
EDIT
Check out this blog post. It gives explanations on the kinds of curves it seems you are going for Curved Path Animations In CSS
The issue is visible when animating the skewY() property. Looks like the element's width shrinks down a little and no longer touches the sides of an equally wide container.
The same does not happen when animating with skewX() - the height is animated as expected.
I'm experiencing the bug in Safari only, both desktop and mobile browsers. Firefox and Chrome work as expected. This issue is visible during transition or animations only.
GIF previews:
Animation in Firefox/Chrome
Animation in Safari
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
Try to use browser prefix.
.arrow {
position: absolute;
top: 20px;
left: 20px;
bottom: 20px;
right: 20px;
background-color: rgb(230, 230, 230);
}
.rect-x {
position: absolute;
left: calc(50vw - 50px);
top: 0;
width: 100px;
height: 100%;
background-color: blue;
animation: skew-x 1s linear alternate infinite;
-webkit-animation: skew-x 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
.rect-y {
position: absolute;
left: 0;
top: calc(50vh - 50px);
width: 100%;
height: 100px;
background-color: red;
animation: skew-y 1s linear alternate infinite;
-webkit-animation: skew-y 1s linear alternate infinite;
transform-origin: center;
-webkit-transform-origin: center;
}
#keyframes skew-x {
0% { transform: skewX(15deg) skewY(0); }
to { transform: skewX(-15deg) skewY(-0);}
}
#-webkit-keyframes skew-x {
0% { -webkit-transform: skewX(15deg) skewY(0); }
to { -webkit-transform: skewX(-15deg) skewY(-0);}
}
#keyframes skew-y {
0% { transform: skewX(0) skewY(15deg); }
to { transform: skewX(0) skewY(-15deg); }
}
#-webkit-keyframes skew-y {
0% { -webkit-transform: skewX(0) skewY(15deg); }
to { -webkit-transform: skewX(0) skewY(-15deg); }
}
<div class="arrow">
<div class="rect-y"></div>
<div class="rect-x"></div>
</div>
I'm playing round with CSS animation by trying to replicate the following new google ads logo - example.
What is the best way to add the bounce effect on the green ball?
My current animation:
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
My code (fiddle):
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock 1.5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% {
top: 0px;
}
50% {
top: 45px;
}
100% {
bottom: 0px;
}
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
I've tried with this animation
animation: greenblock .6s ease-in-out .5s forwards;
and this set of keyframes
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
Demo
.wrap {
border: 1px solid red;
height: 300px;
width: 300px;
position: relative
}
.blue-shape {
position: absolute;
left: 100px;
top: 0px;
width: 45px;
height: 45px;
background: #4285F4;
display: block;
border-radius: 45px;
animation: blueblock 2s forwards;
transform-origin: top center;
}
.yellow-shape {
position: absolute;
left: 122px;
top: 0px;
width: 45px;
height: 45px;
background: #FBBC04;
display: block;
border-radius: 45px;
animation: yellowblock 2s forwards;
transform-origin: top center;
}
.green-ball {
position: absolute;
border-radius: 45px;
width: 45px;
height: 45px;
background: #34A853;
animation: greenblock .6s ease-in-out .5s forwards;
}
#keyframes blueblock {
0% {
height: 45px;
}
25% {
height: 140px;
transform: rotate(0deg);
}
50% {
transform: rotate(-30deg);
}
100% {
height: 140px;
transform: rotate(-30deg);
}
}
#keyframes yellowblock {
0% {
height: 45px;
opacity: 0;
}
25% {
height: 140px;
transform: rotate(0deg);
opacity: 0;
}
50% {
transform: rotate(30deg);
}
100% {
height: 140px;
transform: rotate(30deg);
opacity: 100;
left: 122px;
}
}
#keyframes greenblock {
0% { top: 0px; }
75% { top: calc(100% - 55px); }
50%, 100% { top: calc(100% - 45px); }
}
<div class="wrap">
<div class="yellow-shape">
<div class="green-ball">
</div>
</div>
<div class="blue-shape">
</div>
</div>
The HTML
<div id='loader'>
<div id='loaderLargeSlice' class='loaderSlice'>
<div class='arc'></div>
<div class='arc'></div>
<div class='arc'></div>
</div>
</div>
The CSS
#loader{
position: relative;
width: 100px;
height: 100px;
margin: 14px;
border-radius: 50%;
background: none;
}
.loaderSlice
{
position:absolute;
display:block;
opacity: 0.5;
}
#loaderLargeSlice
{
height: 100px;
width: 100px;
animation: spin 4s linear 0s infinite forwards;
-webkit-animation: spin 4s linear 0s infinite forwards;
}
.arc
{
position: absolute;
top: -14px;
left: -14px;
width: 100%;
height: 100%;
background: none;
border: 14px solid rgba(0,0,0,0);
border-top-color: black;
border-radius: 50%;
}
.arc + .arc
{
transform: rotate(70deg);
-webkit-transform: rotate(70deg);
}
.arc + .arc + .arc
{
transform: rotate(140deg);
-webkit-transform: rotate(140deg);
}
The Problem
Firefox shows ragged edges
Anyone know of a fix?
Answering as unfixable. See #Eevee's comment on the main post.
I want to do this: -webkit-transform: translateX(300px) but from the right instead of having the origin on left.
I tried -webkit-transform-origin: 100% 100% and even top right and it didn't affect it.
Is there a way to do it?
By the power of CSS:
body {
padding: 0;
margin: 0;
}
#page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
z-index:2;
right:0;
}
#left_drawer {
background-color: #222222;
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#toggle {
width: 50px;
height: 50px;
background-color: red;
float: right;
}
.open_drawer {
-webkit-animation: open_drawer 300ms ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform: translateX(0);
}
#-webkit-keyframes open_drawer {
to {
-webkit-transform: translateX(-300px);
}
}
This will make it slide in from the right. Fiddle.