Animated CSS Blobs as Background Not Responsive - css

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>

Related

CSS skewY transition bug in Safari (desktop and mobile)

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>

How to define css animation?

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% }
}

Change slideshow speed CSS

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>

Adding a bounce effect using CSS animation

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>

Transition: rotate not working in Safari

I have a loading page while the website is loading. It works fine in Chrome but I need to fix it on Safari because it's not working. Here's my code:
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
}
.loading {
top: 30%;
right: 45%;
position: fixed;
-webkit-animation: spinHorizontal 4s linear infinite;
-moz-animation: spinHorizontal 4s linear infinite;
animation: spinHorizontal 4s linear infinite;
}
#keyframes spinHorizontal {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
<div class="se-pre-con">
<div class="loading">
<img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png">
</div>
It appears it has to do with the position: fixed on the .se-pre-con element. Try using absolute positioning or positioning it in another way.
.se-pre-con {
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #ffffff;
}
.loading {
width: 279px;
height: 279px;
top: 30%;
right: 45%;
position: fixed;
-webkit-backface-visibility: visible;
-webkit-animation: spinHorizontal 2s linear infinite;
-moz-animation: spinHorizontal 2s linear infinite;
animation: spinHorizontal 2s linear infinite;
background-color: transparent;
}
#keyframes spinHorizontal {
0% {
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg);
}
100% {
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}
<div class="se-pre-con">
<div class="loading">
<img src="http://www.pngmart.com/files/4/Circle-PNG-Picture-279x279.png" />
</div>
</div>

Resources