I was playing around with some #keyframes animations and i got this funky "wagging" kind of motion, problem is I don't know why...
.spinner {
position: relative;
border: 16px solid #e7e7e7;
border-radius: 50%;
height: var(--size);
width: var(--size);
--size: 100px;
}
.spinner>* {
position: absolute;
border: 8px solid transparent;
border-radius: 50%;
animation-direction: alternate;
border-top-color: var(--color);
top: var(--distance); bottom: var(--distance);
left: var(--distance); right: var(--distance);
}
.spinner>:nth-child(1) {
--color: orangered;
--distance: -16px;
animation: spin1 1.8s ease-in-out infinite;
}
.spinner>:nth-child(2) {
--color: skyblue;
--distance: -8px;
animation: spin2 1.8s ease-in-out infinite;
}
#keyframes spin1 {
0% {
transform: rotate(0deg);
}
25% {
top: -16px; bottom: -16px;
left: -16px; right: -16px;
}
50% {
top: -8px; bottom: -8px;
left: -8px; right: -8px;
}
75% {
top: -16px; bottom: -16px;
left: -16px; right: -16px;
}
100% {
transform: rotate(-360deg);
}
}
#keyframes spin2 {
0% {
transform: rotate(-360deg);
}
25% {
top: -8px; bottom: -8px;
left: -8px; right: -8px;
}
50% {
top: -16px; bottom: -16px;
left: -16px; right: -16px;
}
75% {
top: -8px; bottom: -8px;
left: -8px; right: -8px;
}
100% {
transform: rotate(0deg);
}
}
<div class="spinner">
<div></div>
<div></div>
</div>
I'm guessing the "wagging" is caused by the resizing of the 2 inner div:s, however I haven't been able to figure out how to get rid of it.. I'd appreciate both a solution and a better explanation as to why this happens so i can avoid it in the future.
Never mind... after capturing a gif of the animation I realized that the "wagging" was just an optical illusion caused by the way I animate the two slivers...
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
I'm trying to fill this nos bottle then slowly empty it up with css so first the "fill" goes up then slowly slowly drains down, I tried but came with a very terrible result
#bottle, #fill {
position: fixed;
top: 50%;
left: 50%;
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
animation: fill 1s cubic-bezier(0, 1.62, 0.27, -0.67) infinite;
z-index: -1;
}
#keyframes fill {
from {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
to {
top: -50px;
transform: translateX(-50%) rotate(360deg);
}
}
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
If anyone could point how can i achieve this would be awesome.
You can try something like that, but you should consider just left backgroung transparent inside bottom image, outside put a solid color, like black.
#bottle, #fill {
top: 50%;
left: 50%;
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
animation: fill 7s cubic-bezier(1, 2.7, 1, -1.7) infinite;
z-index: -1;
}
#keyframes fill {
from {
top: 450px;
transform: translateX(-50%) rotate(0deg);
}
to {
top: -50px;
transform: translateX(-50%) rotate(360deg);
}
}
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
I'm not absolutely sure what effect you want, but one thing to notice is that you can have the filling and the emptying all in the same animation, without necessarily needing to involve a cubic Bezier function, which in this case seemed to partly fill the bottle, then empty then partly fill but to a different level.
Simplifying things but introducing more detail into the keyframes here's an example of the bottle filling much faster than it empties, by having the percentage of the animation used for filling as much smaller than the emptying.
There are of course many variations on this which can be achieved by having the percentages differ. Also you could reintroduce a cubic Bezier to make the movement less uniform, but that's for your experimentation as I don't know exactly what final effect is wanted.
<head>
<style>
#bottle, #fill {
/* position: fixed; NOTE. had to change this position fixed to absolute get it to line up on Stack Overflow. Outside SO it was fine as fixed */
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(50% - 50px);
}
.box {
width: 96px;
height: 195px;
border-radius: 10px;
text-align: center;
color: #ddd;
font-size: 25px;
font-weight: 600;
position: relative;
overflow: hidden;
top: 50%;
left: 50%;
}
.box:before {
content: "";
position: absolute;
width: 400px;
height: 400px;
background: #00acee;
left: 50%;
transform: translateX(-50%);
border-radius: 40%;
/* animation: fill 20s cubic-bezier(0, 1.62, 0.27, -0.67) infinite; */
animation: fill 20s linear infinite;
z-index: -1;
animation-fill-mode: forwards; /* added */
}
#keyframes fill {
0% {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
10% {
top: -50px;
top: 75px;
transform: translateX(-50%) rotate(360deg);
}
20% {
top: 75px;
transform: translateX(-50%) rotate(0deg);
}
22% {
top: 75px;
transform: translateX(-50%) rotate(0deg);
}
80% {
transform: translateX(-50%) rotate(360deg);
}
100% {
top: 250px;
transform: translateX(-50%) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box">
<img id="bottle" src="https://cdn.discordapp.com/attachments/350561379234873354/813833593084313650/bottle.png" width=100 height=200>
</div>
</body>
Note: in the SO snippet system the position fixed had the effect of separating the blob (liquid) from the bottle - it was fine when the code was just run as it was outside the SO system. To demo it here I have made the bottle position absolute and centered the bottle and blob, just so you can get an idea while here. You can remove the absolute and go back to fixed outside SO.
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>
I am trying to create a simple effect so that when I hover on the inner most circle, the two outer rings rotate around to create a cool effect. I thought this would be an easy task but I cannot seem to figure out what I am doing wrong. When I hover over the inner circle, all that changes are the two inner rings move towards the bottom right hand corner of the screen, without rotating at all. What am I missing here? Thanks
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
transform: rotate(360deg);
}
.circle:hover .circle-1 {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
You are using transform with translation in order to center your element then you are overriding the transform with the rotation which create the issue. Instead you can adjust the top/left values in order to center and avoid using transform then you will have the needed rotation:
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: calc(50% - 55px);
left: calc(50% - 55px);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: calc(50% - 60px);
left:calc(50% - 60px);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
transform: rotate(360deg);
}
.circle:hover .circle-1 {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
You can also simplify your code by using pseudo elements like this:
* {
box-sizing:border-box;
}
.wrapper {
position: relative;
width: 400px;
height: 400px;
margin: auto;
background: black;
}
.circle {
width: 120px;
height: 120px;
border-radius: 50%;
background:radial-gradient(circle at center, grey 50px,transparent 51px);
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle:before,
.circle:after {
content:"";
border-radius: 50%;
position: absolute;
transition: 1.5s all ease-in-out;
border: 2px solid white;
}
.circle:before {
top:0;
left:0;
right:0;
bottom:0;
border-left-color:transparent;
}
.circle:after{
top:5px;
left:5px;
bottom:5px;
right:5px;
border-right-color:transparent;
}
.circle:hover::before {
transform: rotate(360deg);
}
.circle:hover::after {
transform: rotate(-360deg);
}
<div class="wrapper">
<div class="circle">
</div>
</div>
Setting the transform property in the :hover will overwrite the existing transform property, so you need to include the translate transforms in the :hover versions to avoid moving the circles in the process of setting their rotation.
If you want the rotation to animate you'll also need to set initial values for the rotation transform.
One additional note: using transition, the rotation will only happen once. If you want repeated rotations you'll need to use an animation (you can do this by uncommenting the animation lines in the snippet).
Demo:
.wrapper {
position: relative;
width: 400px;
height: 200px;
margin: auto auto;
background: black;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: grey;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle-1 {
width: 108px;
height: 108px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border: 2px;
border-style: solid;
border-color: white white white transparent;
transition: 1.5s all ease-in-out;
}
.circle-2 {
width: 118px;
height: 118px;
border-radius: 50%;
background-color: transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
border: 2px;
border-style: solid;
border-color: white transparent white white;
transition: 1.5s all ease-in-out;
}
.circle:hover .circle-2 {
/*animation: spin 1.5s infinite linear;*/
transform: translate(-50%, -50%) rotate(360deg);
}
.circle:hover .circle-1 {
/*animation: spin 1.5s infinite linear reverse;*/
transform: translate(-50%, -50%) rotate(-360deg);
}
#keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
<div class="wrapper">
<div class="circle">
<div class="circle-1"></div>
<div class="circle-2"></div>
</div>
</div>
Inspired by this tutorial http://tympanus.net/codrops/2014/01/07/shape-hover-effect-with-svg/ I decided to make pure css version of similar effect.
And it looks good and work pretty smooth. What bothers me is why after few attempts I had to set keyframes at 24% and 74% instead of 50%? With 50% animation looks choppy. I really don't like to do things blindfolded, so I'll be grateful for help.
Here is quick dirty implementation:
html {
background: #ccc;
}
.card {
position: relative;
display: inline-block;
height: 400px;
width: 200px;
background: #000;
margin: 50px;
overflow: hidden;
}
.card-head {
position: absolute;
background: #000;
height: 400px;
width: 400px;
border-radius: 50%;
left: -100px;
top: -173px;
z-index: 10;
-webkit-animation-name: carda;
animation-name: carda;
}
.card-extend {
position: absolute;
background: #fff;
height: 400px;
width: 400px;
bottom: -200px;
left: -100px;
z-index: 5;
-webkit-animation-name: cardb;
animation-name: cardb;
}
.card-animated {
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
}
.card:hover .card-head,
.card:focus .card-head{
-webkit-animation-name: cardhovera;
animation-name: cardhovera;
}
.card:hover .card-extend,
.card:focus .card-extend{
-webkit-animation-name: cardhoverb;
animation-name: cardhoverb;
}
#-webkit-keyframes carda {
from {
border-radius: 0%;
top: -320px;
z-index: 2;
}
24% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 50%;
top: -173px;
}
}
#keyframes carda {
from {
border-radius: 0%;
top: -320px;
z-index: 2;
}
24% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 50%;
top: -173px;
}
}
#-webkit-keyframes cardhovera {
from {
border-radius: 50%;
top: -173px;
}
76% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 0%;
top: -320px;
z-index: 2;
}
}
#keyframes cardhovera {
from {
border-radius: 50%;
top: -173px;
}
76% {
top: -320px;
border-radius: 25%;
z-index: 2;
}
to {
border-radius: 0%;
top: -320px;
z-index: 2;
}
}
#-webkit-keyframes cardb {
from {
bottom: -53px;
border-radius: 50%;
}
76% {
bottom: -200px;
border-radius: 25%;
}
to {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
}
#keyframes cardb {
from {
bottom: -53px;
border-radius: 50%;
}
76% {
bottom: -200px;
border-radius: 25%;
}
to {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
}
#-webkit-keyframes cardhoverb {
from {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
24% {
bottom: -200px;
border-radius: 25%;
}
to {
bottom: -53px;
border-radius: 50%;
}
}
#keyframes cardhoverb {
from {
border-radius: 0;
z-index: 5;
bottom: -200px;
}
24% {
bottom: -200px;
border-radius: 25%;
}
to {
bottom: -53px;
border-radius: 50%;
}
}
<div tabindex="0" class="card">
<div class="card-head card-animated">
</div>
<div class="card-extend card-animated">
</div>
</div>
I think this choppy effect you are talking about has more to do with the way animation in css work. As the easing is applied to the whole extension of it, this means, imagine some keyframes like this:
#keyframes exampleFrames {
0% {
transform: translateX(50px)
}
50% {
transform: translateX(0)
}
100% {
transform: translateX(50px)
}
}
Even though you can add easing to the animation the element affected will start at 50 pixels to the right and start moving to the left to it's initial position and in the center frame will suddenly change direction to get to the last position again. The issue is with this sudden change, this is what makes it choppy.
To avoid this you might need to use javascript or, as you've seen tweak the keyframes to minimise this undesirable visual effect.