I currently have a slideshow on my website but it is sliding too fast, I would like to make it slower but I dont know how can I do that, everytime I try to change some things I end up ruining everything.
I wanted to get like 5/6 seconds each slide.
I would be extremely grateful if someone could help me.
.topSlider {
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
overflow: hidden;
position: absolute; }
.topSlider span {
position: absolute;
color: white;
z-index: 1;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center; }
.topSlider .slide {
position: absolute;
display: block;
width: 100%;
height: 100%;
-webkit-animation: slide 12s infinite;
animation: slide 10s infinite;
overflow: hidden; }
.topSlider .slide:nth-child(2) {
left: 0%;
-webkit-animation-delay: -1s;
animation-delay: -0.5s;
background-color: black;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(3) {
left: 100%;
-webkit-animation-delay: 2s;
animation-delay: 2s;
background-color: red;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(4) {
left: 100%;
-webkit-animation-delay: 5s;
animation-delay: 4.5s;
background-color: white;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(5) {
left: 100%;
-webkit-animation-delay: 8s;
animation-delay: 7s;
background-color: blue;
background-size: cover;
background-position: center; }
.topSlider p {
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: white; }
#-webkit-keyframes slide {
0% {
left: 100%;
width: 100%; }
5% {
left: 0%; }
25% {
left: 0%; }
30% {
left: -100%;
width: 100%; }
31% {
left: -100%;
width: 0%; }
100% {
left: 100%;
width: 0%; } }
#keyframes slide {
0% {
left: 100%;
width: 100%; }
5% {
left: 0%; }
25% {
left: 0%; }
30% {
left: -100%;
width: 100%; }
31% {
left: -100%;
width: 0%; }
100% {
left: 100%;
width: 0%; } }
<div class="topSlider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
You can change the seconds
-webkit-animation-delay: -1s;
animation-delay: -0.5s;
for each child.
but also make sure that the main slider time is proportional to the interval between the seconds in the slider children. Have a look at my example below and compare it to yours to see what I mean.
main slider time in your example:
-webkit-animation: slide 12s infinite;
animation: slide 10s infinite;
.topSlider {
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
overflow: hidden;
position: absolute; }
.topSlider span {
position: absolute;
color: white;
z-index: 1;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center; }
.topSlider .slide {
position: absolute;
display: block;
width: 100%;
height: 100%;
-webkit-animation: slide 20s infinite;
animation: slide 20s infinite;
overflow: hidden; }
.topSlider .slide:nth-child(2) {
left: 0%;
-webkit-animation-delay: -1s;
animation-delay: -0.5s;
background-color: black;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(3) {
left: 100%;
-webkit-animation-delay: 5s;
animation-delay: 4.5s;
background-color: red;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(4) {
left: 100%;
-webkit-animation-delay: 10s;
animation-delay: 9.0s;
background-color: white;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(5) {
left: 100%;
-webkit-animation-delay: 15s;
animation-delay: 13.5s;
background-color: blue;
background-size: cover;
background-position: center; }
.topSlider p {
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: white; }
#-webkit-keyframes slide {
0% {
left: 100%;
width: 100%; }
5% {
left: 0%; }
25% {
left: 0%; }
30% {
left: -100%;
width: 100%; }
31% {
left: -100%;
width: 0%; }
100% {
left: 100%;
width: 0%; } }
#keyframes slide {
0% {
left: 100%;
width: 100%; }
5% {
left: 0%; }
25% {
left: 0%; }
30% {
left: -100%;
width: 100%; }
31% {
left: -100%;
width: 0%; }
100% {
left: 100%;
width: 0%; } }
<div class="topSlider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
You can change the duration part of the -webkit-animation and animation properties ("2s"):
-webkit-animation: slide 2s infinite;
animation: slide 2s infinite;
.topSlider {
display: block;
width: 100%;
height: 100%;
background-color: #1f1f1f;
overflow: hidden;
position: absolute; }
.topSlider span {
position: absolute;
color: white;
z-index: 1;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center; }
.topSlider .slide {
position: absolute;
display: block;
width: 100%;
height: 100%;
-webkit-animation: slide 6s infinite;
animation: slide 6s infinite;
overflow: hidden; }
.topSlider .slide:nth-child(2) {
left: 0%;
-webkit-animation-delay: 6s;
animation-delay: 6s;
background-color: black;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(3) {
left: 100%;
-webkit-animation-delay: 6s;
animation-delay: 6s;
background-color: red;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(4) {
left: 100%;
-webkit-animation-delay: 6s;
animation-delay: 6s;
background-color: white;
background-size: cover;
background-position: center; }
.topSlider .slide:nth-child(5) {
left: 100%;
-webkit-animation-delay: 6s;
animation-delay: 6s;
background-color: blue;
background-size: cover;
background-position: center; }
.topSlider p {
text-align: center;
display: inline-block;
width: 100%;
margin-top: 340px;
color: white; }
#-webkit-keyframes slide {
0% {
left: 100%;
width: 100%; }
5% {
left: 0%; }
25% {
left: 0%; }
30% {
left: -100%;
width: 100%; }
31% {
left: -100%;
width: 0%; }
100% {
left: 100%;
width: 0%; } }
#keyframes slide {
0% {
left: 100%;
width: 100%; }
5% {
left: 0%; }
25% {
left: 0%; }
30% {
left: -100%;
width: 100%; }
31% {
left: -100%;
width: 0%; }
100% {
left: 100%;
width: 0%; } }
<div class="topSlider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
Related
I have some blobs that are animated as a background for my webpage but the problem is that they are overflowing on the page causing my content to not be responsive. I have tried adding position: relative and position: absolute as well as overflow:hidden but nothing seems to work. Here is the code I have and I appreciate any help I can receive!
.shapes {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.shape:nth-of-type(1) {
width: 637.96px;
height: 539.24px;
position: absolute;
left: -5%;
top: 20%;
background: #befae1;
animation: wave 8s ease-in-out infinite;
}
.shape:nth-of-type(2) {
width: 700px;
height: 700px;
background: #f0f0ff;
position: absolute;
top: 80%;
left: 0%;
animation: wave 5s ease-in-out infinite;
}
.shape:nth-of-type(3) {
width: 500px;
height: 500px;
background: #feee85;
position: absolute;
top: 35%;
right: 15%;
animation: wave 12s ease-in-out infinite;
}
.shape:nth-of-type(4) {
width: 450px;
height: 350px;
background: #facdcd;
position: absolute;
top: 75%;
right: -5%;
animation: wave 6s ease-in-out infinite;
}
.shape:nth-of-type(5) {
width: 350px;
height: 350px;
background: #bfabff;
position: absolute;
top: 115%;
right: 25%;
animation: wave 15s ease-in-out infinite;
}
.shape:nth-of-type(6) {
width: 900px;
height: 900px;
background: #00c8af;
position: absolute;
top: 230%;
left: -25%;
transform: rotate(90deg);
animation: wave 15s ease-in-out infinite;
}
.shape:nth-of-type(7) {
width: 700px;
height: 700px;
background: #facdcd;
position: absolute;
top: 230%;
left: 25%;
animation: wave 5s ease-in-out infinite;
}
.shape:nth-of-type(8) {
width: 450px;
height: 350px;
background: #fab4ff;
position: absolute;
top: 230%;
left: 45%;
animation: wave 6s ease-in-out infinite;
}
.shape:nth-of-type(9) {
width: 637.96px;
height: 539.24px;
position: absolute;
top: 255%;
right: -5%;
background: #befae1;
animation: wave 8s ease-in-out infinite;
}
.shape:nth-of-type(10) {
width: 350px;
height: 350px;
background: #bfabff;
position: absolute;
top: 300%;
right: 15%;
animation: wave 15s ease-in-out infinite;
}
#keyframes wave {
0%,
100% {
border-radius: 66% 34% 37% 63% / 57% 31% 69% 43%;
}
50% {
border-radius: 26% 74% 51% 49% / 22% 53% 47% 78%;
}
}
<div class="shapes">
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
body {
position: relative;
margin: 0;
min-height: 100vh;
}
.shapes {
position: absolute;
height: 100%; width: 100%;
overflow: hidden;
}
.shape { position: absolute; }
.shape:nth-of-type(1) {
top: 20%; left: -5%;
height: 539.24px; width: 637.96px;
background: #befae1;
animation: wave 8s ease-in-out infinite;
}
.shape:nth-of-type(2) {
top: 80%; left: 0%;
height: 700px; width: 700px;
background: #f0f0ff;
animation: wave 5s ease-in-out infinite;
}
.shape:nth-of-type(3) {
top: 35%; right: 15%;
height: 500px; width: 500px;
background: #feee85;
animation: wave 12s ease-in-out infinite;
}
.shape:nth-of-type(4) {
top: 75%; right: -5%;
height: 350px; width: 450px;
background: #facdcd;
animation: wave 6s ease-in-out infinite;
}
.shape:nth-of-type(5) {
top: 115%; right: 25%;
height: 350px; width: 350px;
background: #bfabff;
animation: wave 15s ease-in-out infinite;
}
.shape:nth-of-type(6) {
top: 230%; left: -25%;
height: 900px; width: 900px;
background: #00c8af;
transform: rotate(90deg);
animation: wave 15s ease-in-out infinite;
}
.shape:nth-of-type(7) {
top: 230%; left: 25%;
height: 700px; width: 700px;
background: #facdcd;
animation: wave 5s ease-in-out infinite;
}
.shape:nth-of-type(8) {
top: 230%; left: 45%;
height: 350px; width: 450px;
background: #fab4ff;
animation: wave 6s ease-in-out infinite;
}
.shape:nth-of-type(9) {
top: 255%; right: -5%;
height: 539.24px; width: 637.96px;
background: #befae1;
animation: wave 8s ease-in-out infinite;
}
.shape:nth-of-type(10) {
top: 300%; right: 15%;
height: 350px; width: 350px;
background: #bfabff;
animation: wave 15s ease-in-out infinite;
}
#keyframes wave {
0%, 100% { border-radius: 66% 34% 37% 63% / 57% 31% 69% 43%; }
50% { border-radius: 26% 74% 51% 49% / 22% 53% 47% 78%; }
}
<div class="shapes">
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
<div class="shape"></div>
</div>
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 am trying to create a banner using only CSS and no JS. If I were to use a JS library such as GreenSock or Create if would be easier to set the timing but I have no idea how to do it using only keyframes.
I have tried to set the opacity of the items in order to show the ones beneath but it's not working out.
box-sizing: border-box;
margin: 0;
padding: 0;
}
.banner{
position: relative;
width: 100vw;
}
.first {
background-color: black;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
}
#keyframes first {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
.first img {
width: 90%;
position: absolute;
object-fit: contain;
top: 30%;
animation-name: first-screen;
animation-duration: 2s;
animation-timing-function: ease;
}
.bg {
width: 100vw;
height: 100vh;
margin-top: -10%;
overflow: hidden;
object-fit: cover;
object-position: center;
animation-name: bg;
animation-duration: 3s;
animation-delay: 2s;
}
#keyframes bg {
0% {opacity: 0;}
100% {opacity: 1;}
}
.offer{
display: flex;
width: 100vw;
object-fit: contain;
position: fixed;
bottom:0
}
.copy {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
animation-name: copy;
animation-duration: 3s;
animation-delay: 2s;
}
#keyframes copy {
0% {opacity: 0;}
50% {opacity: 1;}
100% {opacity: 0;}
}
.headline {
width: 70%;
position: absolute;
object-fit: contain;
top: 10%;
}
.subheadline {
width: 70%;
position: absolute;
object-fit: contain;
top: 22%;
}
I need the first-screen to fade in and that screen needs to show for two sec and fade away, immediately then the background will fade in in and last for three seconds while the copy also fade in at a different pace. In this case all my elements except the background end up showing at the end of the animation.
This is the html:
<div class="first-screen"><img src="img/1st_frame.jpg"/></div>
<div class="copy">
<img src="img/headline.png" class="headline"/>
<img src="img/subheadline.png" class="subheadline" />
</div>
<img src="img/offer.png" class="offer" />
<img src="img/bg.jpg" class="bg"/>
I kind of fix it by setting the same duration for all the animations and then using percents to show and hide the items but still there are elements that should show up and fade at the same time and have different timing even though the CSS keyframes and properties are the same. The bg and the headlines should both fade at the same time instead only the headlines fade. Does anyone know why?
html {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.interstitial {
position: relative;
width: 100vw;
}
.first {
background-color: black;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
}
.first img {
width: 90%;
position: absolute;
object-fit: contain;
top: 30%;
animation-name: first-screen;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
}
#keyframes first {
0% {
opacity: 0.5;
}
20% {
opacity: 1;
}
40% {
opacity: 0
}
100% {
opacity: 0;
}
}
.bg {
width: 100vw;
height: 100vh;
margin-top: -20%;
overflow: hidden;
object-fit: cover;
object-position: center;
animation-name: bg;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
z-index: 0
}
#keyframes bg {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.offer {
display: flex;
width: 100vw;
object-fit: contain;
position: fixed;
bottom: 0;
z-index: 999;
}
.copy {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
width: 100vw;
height: 100vh;
animation-name: headlines;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}
#keyframes headlines {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.headline {
width: 70%;
position: absolute;
object-fit: contain;
top: 10%;
}
.subheadline {
width: 70%;
position: absolute;
object-fit: contain;
top: 22%;
}
I have written this code to make a rectangle move from left to right like a car but this is not working. I think there is problem with #keyframes example
* {
margin: auto;
padding: 0px;
}
body {
background-color: lightgreen;
}
.main {
height: 100%;
width: 100%;
border: 1px solid black;
}
.road {
height: 300px;
width: 100%;
background-color: black;
margin-top: 25%;
}
#keyframes example {
from {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
to {
top: 20%;
left: 0%
}
}
#-webkit-keyframes example {
0% {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
100% {
top: 20%;
left: 0%
}
}
#-moz-keyframes example {
0% {
top: 20%;
left: 80%
}
20% {
top: 20%;
left: 60%
}
40% {
top: 20%;
left: 50%
}
60% {
top: 20%;
left: 30%
}
80% {
top: 20%;
left: 10%
}
100% {
top: 20%;
left: 0%
}
}
.car {
height: 100px;
width: 200px;
background-color: red;
font-size: 50px;
color: black;
text-align: center;
vertical-align: middle;
margin-top: 100px;
animation-name: example;
animation-duration: 10s;
animation-iteration-count: infinite;
-webkit-animation-name: example;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: example;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
}
You need to use position: relative on .car to be displayed like that.
.car {
position: relative;
height:100px;
width:200px;
background-color: red;
font-size: 50px;
color:black;
text-align: center;
vertical-align: middle;
margin-top: 100px;
animation-name:example;
animation-duration: 10s;
animation-iteration-count: infinite;
-webkit-animation-name: example;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: example;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
}
It seems that you're trying to move the car as if it were absolutely positioned. Make sure you have a wrapper that the car is inside of (In this case I'm assuming it's the road) and give that a relative position. Give you're car an absolute position. Here's a codepen I created that may help you!
https://codepen.io/anon/pen/MdYLOM
Also try making your animation like this:
#keyframes example {
0% { left: 0% }
100% { left: 100% }
}
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>