I want to create a jumping animation with CSS. Here is how I would like to split my animation:
Move up
Move down and start scaling up in the last half
Touch down at maximum scaling
Move up again scaling down in the first half
But what happens is the following:
Move up
Move down
Scale up
Scale down
Move up
#keyframes jump {
0% {
transform: translateY(0);
}
10% {
transform: translateY(-30%);
}
15% {
transform: scale(1, 1);
}
20% {
transform: translateY(0) scale(1.25, 0.75);
}
25% {
transform: scale(1, 1);
}
30% {
transform: translateY(-20%);
}
}
This felt a bit more natural...
#keyframes jump {
0% {
transform: translateY(0) scale(1, 1);
}
15% {
transform: translateY(-30%) scale(1, 1);
}
22% {
transform: translateY(0) scale(1, 1);
}
25% {
transform: translateY(10%) scale(1.25, 0.75);
}
30% {
transform: translateY(-20%) scale(1, 1);
}
36% {
transform: translateY(0) scale(1, 1);
}
40% {
transform: translateY(5%) scale(1.1, 0.95);
}
44% {
transform: translateY(-10%) scale(1, 1);
}
47% {
transform: translateY(0) scale(1, 1);
}
}
.item {
width: 5rem;
height: 5rem;
margin: 2rem;
border-radius: 100%;
background: rebeccapurple;
animation: jump 3s infinite;
}
<div class="item"></div>
Related
How you see in code my span after 'opacity:0 and rotate()' goes up, then it have to 'scale and opacity: 0' and after that go to down. But it does not goes like that, it quickly before 'scale and opacity' goes down.
Just look at how it works
I don't have many experience with animations but I can not understand, that code have to work properly. But it lose its direction
The link in my commentary
#keyframes for_box2 {
0% {
opacity: 1;
}
3% {
opacity: .5;
}
5% {
opacity: .2;
transform: rotateY(90deg);
}
8% {
opacity: 0;
transform: rotateY(180deg);
}
10% {
transform: translateY(-50%);
}
12% {
transform: translateY(-100%);
}
14% {
transform: translateY(-150%);
}
16% {
transform: translateY(-200%);
}
18% {
transform: scale(.95);
}
20% {
transform: scale(1);
}
22% {
transform: scale(1.25);
}
24% {
transform: scale(1.1);
}
26% {
transform: scale(1);
opacity: .8;
}
28% {
opacity: .5;
transform: rotateY(90deg);
}
30% {
opacity: .2;
transform: rotateY(120deg)
}
32% {
opacity: 0;
transform: rotateY(180deg)
}
40% {
animation-timing-function: ease-out;
transform: translateX(-50%);
transform: rotateY(180deg);
}
48% {
transform: translateX(-120%);
}
56% {
opacity: 1;
transform: rotateY(0deg);
}
64% {
opacity: 0;
transform: rotateY(180deg);
}
72% {
transform: translateY(-200%);
animation-timing-function: cubic-bezier(.01,1.42,.02,1);
}
80% {
opacity: 1;
transform: rotateY(0deg);
}
88% {
opacity: 0;
transform: rotateY(180deg);
}
94% {
transform: translateY(0);
animation-timing-function: cubic-bezier(.01,1.42,.02,1);
}
100% {
transform: rotateY(0deg);
opacity: 1;
}
}
https://codepen.io/babken-asryan/pen/XvbdXB
You need to put all the transformation in the same transform or you will simply override them:
body {
margin: 0;
position: relative;
overflow-x: hidden;
box-sizing: border-box;
}
.wrapper {
transition: .7s;
border: solid #357ae8;
transform: rotate(-.5deg);
padding: 0 !important;
}
.wrapper .inside {
background: linear-gradient(288deg, rgba(233, 26, 93, 0.8883928571428571) 0%, rgba(255, 241, 29, 0.9220063025210083) 36%, rgba(231, 235, 70, 1) 51%, rgba(255, 247, 117, 1) 68%, rgba(156, 233, 247, 0.9472163865546218) 91%);
border: solid #357ae8;
background-size: 400% 400%;
transform: rotate(.5deg);
display: block;
width: 350px;
height: 500px;
animation: Gradient 15s ease infinite;
}
.wrapper .inside span {
display: block;
width: 40%;
height: 30%;
position: absolute;
}
.wrapper .inside span.box2 {
bottom: 5%;
right: 5%;
background: url('https://svgur.com/i/EAo.svg') no-repeat;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
animation: for_box2 linear 45s 1s infinite;
}
#keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
#keyframes for_box2 {
0% {
opacity: 1;
}
3% {
opacity: .5;
}
5% {
opacity: .2;
transform: translateX(0) translateY(0) rotateY(90deg);
}
8% {
opacity: 0;
transform: translateX(0) translateY(0) rotateY(180deg);
}
10% {
transform: translateX(0) translateY(-50%) rotateY(180deg);
}
12% {
transform: translateX(0) translateY(-100%) rotateY(180deg);
}
14% {
transform: translateX(0) translateY(-150%) rotateY(180deg);
}
16% {
transform: translateX(0)translateY(-200%) rotateY(180deg);
}
18% {
transform: translateX(0) translateY(-200%) rotateY(180deg) scale(.95);
}
20% {
transform: translateX(0) translateY(-200%) rotateY(180deg) scale(1);
}
22% {
transform: translateX(0) translateY(-200%) rotateY(180deg) scale(1.25);
}
24% {
transform: translateX(0) translateY(-200%) rotateY(180deg) scale(1.1);
}
26% {
transform: translateX(0) translateY(-200%) rotateY(180deg) scale(1);
opacity: .8;
}
28% {
opacity: .5;
transform: translateX(0) translateY(-200%) rotateY(90deg);
}
30% {
opacity: .2;
transform: translateX(0) translateY(-200%) rotateY(120deg);
}
32% {
opacity: 0;
transform: translateX(0) translateY(-200%)rotateY(180deg);
}
40% {
animation-timing-function: ease-out;
transform: translateX(-50%) translateY(-200%) rotateY(180deg);
}
48% {
transform: translateX(-120%) translateY(-200%) rotateY(180deg);
}
56% {
opacity: 1;
transform: translateX(-120%) translateY(-200%) rotateY(0deg);
}
64% {
opacity: 0;
transform: translateX(-120%) translateY(-200%) rotateY(180deg);
}
72% {
transform: translateX(-120%) translateY(-200%) rotateY(180deg);
animation-timing-function: cubic-bezier(.01, 1.42, .02, 1);
}
80% {
opacity: 1;
transform: translateX(-120%) translateY(-200%) rotateY(0deg);
}
88% {
opacity: 0;
transform: translateX(-120%) translateY(-200%) rotateY(180deg);
}
94% {
transform: translateX(-120%) translateY(0) rotateY(180deg);
animation-timing-function: cubic-bezier(.01, 1.42, .02, 1);
}
100% {
transform: translateX(-120%) translateY(0) rotateY(0deg);
opacity: 1;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
<div class="container-fluid mt-5">
<div class="row d-flex justify-content-around">
<div class="d-inline-flex p-2 wrapper">
<div class="d-inline-flex p-2 inside">
<span class="box2"></span>
</div>
</div>
</div>
I need an arrow to slightly move (bounce) to the bottom right corner on hover, using CSS. I've used the code below and I like what it does however this only moves the arrow left/right. How do I amend it so that it moves slightly to the bottom as well? I've tried using 'translateY' but couldn't workout the exact pixel amount for the animation to be smooth.
I've tried using 'bounce' but actually 'swing' seems to look better.
What I'm looking for is the kind on animation of this page:
http://ianlunn.github.io/Hover/ (called 'Wobble to Bottom Right')
.arrow:hover{
-webkit-animation: swing 1s ease;
animation: swing 1s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
#-webkit-keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
#keyframes swing
{
15%
{
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30%
{
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
50%
{
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
65%
{
-webkit-transform: translateX(-3px);
transform: translateX(-3px);
}
80%
{
-webkit-transform: translateX(2px);
transform: translateX(2px);
}
100%
{
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
You have to use translate(x,y) instead of translateX(x) for 2d transformation as #fen1x mentioned in the comment above
Try this:
#keyframes hvr-wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
}
33.3% {
-webkit-transform: translate(-6px, -6px);
transform: translate(-6px, -6px);
}
49.95% {
-webkit-transform: translate(4px, 4px);
transform: translate(4px, 4px);
}
66.6% {
-webkit-transform: translate(-2px, -2px);
transform: translate(-2px, -2px);
}
83.25% {
-webkit-transform: translate(1px, 1px);
transform: translate(1px, 1px);
}
100% {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
}
I have used css3 animate for small text to rotate but it wont rotate.
Jsfiddle
<h1 class="title">Coming Soon <small>btw learning</small></h1>
small {
animation:spin 4s linear infinite;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
use display:inline-block;
<h1 class="title">Coming Soon <span class="animation">btw learning</span></h1>
.title
{
font-family: 'Cinzel Decorative', cursive;
text-align: center;
font-size: 100px;
margin-top: 25%;
}
.animation {
animation:spin 4s linear infinite;
display:inline-block;
}
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
20% { -webkit-transform: rotate(90deg); }
25% { -webkit-transform: rotate(90deg); }
45% { -webkit-transform: rotate(180deg); }
50% { -webkit-transform: rotate(180deg); }
70% { -webkit-transform: rotate(270deg); }
75% { -webkit-transform: rotate(270deg); }
100% { -webkit-transform: rotate(360deg); }
}
Hello I have a button that pulses in css3 (works great) what I want it to do is pulse every 12sec...how can I do this?
.pulse {
animation-name: pulse_animation;
animation-duration: 10000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes pulse_animation {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}
I have set the duration to 3sec to let you see exactly how does it work. You can freely adjust the duration by urself. Just change 3s into 12s.
https://jsfiddle.net/bL164jj8/
.pulse {
animation-name: pulse_animation;
animation-duration: 3s;
transform-origin: 70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
height: 100px;
width: 100px;
background-color: lightblue;
}
#keyframes pulse_animation {
0% {
transform: scale(1);
}
8% {
transform: scale(1.01);
}
16% {
transform: scale(1.02);
}
24% {
transform: scale(1.03);
}
32% {
transform: scale(1.04);
}
40% {
transform: scale(1.05);
}
50% {
transform: scale(1.06);
}
58% {
transform: scale(1.05);
}
66% {
transform: scale(1.04);
}
74% {
transform: scale(1.03);
}
82% {
transform: scale(1.02);
}
90% {
transform: scale(1.01);
}
100% {
transform: scale(1);
}
}
<div class='pulse'>
</div>
I have tried to make an animated arrow like like the one in this site. A demo of my code attempt is available here. But the animation is not working in-line with the animation in the site.
My Code :
.animated-arrow-1 {
-webkit-animation: arrow1 3s infinite ease-out;
animation: arrow1 3s infinite ease-out;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0
}
.animated-arrow-2 {
-webkit-animation: arrow2 3s infinite ease-in;
animation: arrow2 3s infinite ease-in;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1
}
#-webkit-keyframes arrow1 {
0% {
opacity: 0;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 0;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 1;
-webkit-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#keyframes arrow1 {
0% {
opacity: 0;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 0;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 1;
-webkit-transform: translate(0,36px);
-ms-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#-webkit-keyframes arrow2 {
0% {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 1;
-webkit-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 0;
-webkit-transform: translate(0,36px);
transform: translate(0,36px)
}
}
#keyframes arrow2 {
0% {
opacity: 1;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
90% {
opacity: 1;
-webkit-transform: translate(0,0);
-ms-transform: translate(0,0);
transform: translate(0,0)
}
100% {
opacity: 0;
-webkit-transform: translate(0,36px);
-ms-transform: translate(0,36px);
transform: translate(0,36px)
}
}
Could you please anybody tell me what I missed here?
You were reasonably close to achieving the required animation. In your code, there was only one movement from 0px to 36px for both the arrows but what was actually needed is a two stage animation with different keyframe settings for the two arrows. One arrow should start invisible at 0px, fade-in to 50px, stay there and then fade-out to 100px whereas the other arrow should start visible at 50px, fade-out to 100px, immediately go to 0px and then fade-in at 50px.
.icon {
position: relative;
}
.icon img {
position: absolute;
margin: auto;
display: block;
}
.animated-arrow-1 {
animation: arrow1 3s infinite linear;
opacity: 0
}
.animated-arrow-2 {
animation: arrow2 3s infinite linear;
opacity: 1;
}
#keyframes arrow1 {
0%, 10% {
opacity: 0;
transform: translate(0, 0px);
}
50%,
60% {
opacity: 1;
transform: translate(0, 50px)
}
100% {
opacity: 0;
transform: translate(0, 100px)
}
}
#keyframes arrow2 {
0%, 10% {
opacity: 1;
transform: translate(0, 50px);
}
50%,
60% {
opacity: 0;
transform: translate(0, 100px)
}
61% {
opacity: 0;
transform: translate(0, 0);
}
100% {
opacity: 1;
transform: translate(0, 50px)
}
}
body {
background: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="icon">
<img src="http://s12.postimg.org/ibsmfp6w9/Down_Arrow.png" class="animated-arrow-1" />
<img src="http://s12.postimg.org/ibsmfp6w9/Down_Arrow.png" class="animated-arrow-2" />
</div>